/* ============================================================ APP CSS — PhotoLab's stylesheet (graduation slice 3b). Moved verbatim from index.html's in-template helmet style block (which pl-runtime's helmet handler used to hoist into ); now loaded as a plain in index.html's head. Font url()s stay relative ("fonts/…") — this file lives in public/ root alongside index.html, so they resolve identically. Most component styling is inline style objects in app.js's S map; this file carries only @font-face, resets, form-control skins, and @keyframes. ============================================================ */ @font-face{font-family:'Brutal Type';src:url('fonts/BrutalType-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Brutal Type';src:url('fonts/BrutalType-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Medium.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Material Symbols Rounded';src:url('fonts/MaterialSymbolsRounded-subset.woff2') format('woff2');font-weight:400;font-display:block} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;background:#06070c;overscroll-behavior:none} [data-hscroll]{scrollbar-width:none;-ms-overflow-style:none} [data-hscroll]::-webkit-scrollbar{display:none} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;margin:0} input[type=range]::-webkit-slider-runnable-track{height:3px;background:#2a2d33} input[type=range]::-moz-range-track{height:3px;background:#2a2d33} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:24px;background:var(--accent,#97CEFF);margin-top:-10.5px;border:0;border-radius:0} input[type=range]::-moz-range-thumb{width:16px;height:24px;background:var(--accent,#97CEFF);border:0;border-radius:0} input[type=range]:active::-webkit-slider-thumb{background:#fff} select option{background:#0a0b0f;color:#fff} .ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} @keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes sheetOut{from{transform:translateY(0)}to{transform:translateY(100%)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes barUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes editUp{from{transform:translateY(28px)}to{transform:translateY(0)}} @keyframes loadbar{from{width:0%}to{width:100%}} @keyframes bkFill{from{transform:translateY(82px)}to{transform:translateY(0)}}@keyframes bkSlosh{from{transform:translateX(0)}to{transform:translateX(-40px)}} @keyframes bkBubble{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:.9}85%{opacity:.9}100%{transform:translateY(-82px) scale(1.3);opacity:0}} @keyframes sheetBodyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes landDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}} @keyframes stackIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} @keyframes ddIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} @keyframes ddOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}} @keyframes ddInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes ddOutUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}} @keyframes chevL{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}} @keyframes chevR{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}} @keyframes chevDown{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}} @keyframes framePulse{0%{opacity:1}30%{opacity:.42}100%{opacity:1}} @keyframes replacePulse{0%,100%{box-shadow:0 0 0 0 rgba(151,206,255,0);border-color:#97CEFF}50%{box-shadow:0 0 0 7px rgba(151,206,255,.22);border-color:#fff}} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} }