:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#0e0c0b;--paper:#e8e0d4;--paper-dim:#d4cbc0;--cream:#f3ebe2;--ember:#c45c2a;--ember-soft:#c45c2a38;--line:#0e0c0b24;--muted:#0e0c0b8c;--muted-on-ink:#f3ebe285;--display:"Instrument Serif", Georgia, "Times New Roman", serif;--ui:"Outfit", system-ui, sans-serif;font-family:var(--ui);background-color:var(--ink);color:var(--cream);background-image:radial-gradient(120% 80% at 50% -20%,#c45c2a17,#0000 50%),url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");font-weight:400}*{box-sizing:border-box}html{min-height:100%}body{min-height:100dvh;margin:0}#root{flex-direction:column;align-items:center;min-height:100dvh;display:flex}body.tool-cursor-active,body.tool-cursor-active *{cursor:none!important}button,input{font:inherit}button{cursor:pointer}.app-shell{gap:0;width:100%;max-width:1480px;margin:auto;padding:1.25rem 1.25rem 1.75rem;display:grid}.app-shell-sidebar{flex-direction:column;min-width:0;display:flex}.hero-copy,.stage-panel{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:none;border-radius:0}.hero-copy{border-bottom:1px solid var(--line);padding:0 0 1rem}.stage-panel{padding:1rem 0 0}.eyebrow{color:var(--ember);text-transform:uppercase;letter-spacing:.22em;margin:0 0 .25rem;font-size:.68rem;font-weight:500}h1{font-family:var(--display);letter-spacing:-.02em;color:var(--cream);margin:0 0 .35rem;font-size:clamp(2rem,4.5vw,3.1rem);font-weight:400;line-height:1.05}.lede{color:var(--muted-on-ink);max-width:52ch;margin:0;font-size:.94rem;font-weight:300;line-height:1.45}.flow-step-banner{border-bottom:1px solid var(--line);background:0 0;margin:.55rem 0 0;padding:.35rem 0 .5rem}.flow-step-text{flex-direction:column;gap:.25rem;margin:0;line-height:1.45;display:flex}.flow-step-layout{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.flow-step-actions{flex:none;justify-items:end;gap:.3rem;display:grid}.flow-step-count{color:var(--cream);letter-spacing:.02em;font-size:.95rem;font-weight:500}.flow-step-hint{color:var(--muted);max-width:48ch;font-size:.88rem;font-weight:300}.flow-step-progress-note{text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:.68rem;font-weight:500}.flow-step-done{color:var(--muted);font-style:italic;font-family:var(--display);margin:0;font-size:.95rem;line-height:1.4}.metrics-strip{border-bottom:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem .75rem;margin:.45rem 0 .55rem;padding:.35rem 0;display:grid}.metric-chip{flex-direction:column;align-items:flex-start;gap:.2rem;min-width:0;display:flex}.metric-chip .metric-label{text-transform:uppercase;letter-spacing:.12em;color:var(--muted-on-ink);font-size:.7rem;font-weight:500}.metric-value{font-variant-numeric:tabular-nums;color:var(--cream);font-size:1rem;font-weight:600;line-height:1.2}.control-panel{flex-direction:column;gap:0;display:flex}.panel-slab{border-bottom:1px solid var(--line);padding:.55rem 0}.panel-slab:last-child{border-bottom:none}.slab-head{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.45rem;display:flex}.slab-head-tight{margin-bottom:.35rem}.slab-head h2,.stage-caption p{text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0;font-size:.72rem;font-weight:600}.slab-meta{color:var(--muted);text-align:right;max-width:22ch;font-size:.78rem;font-weight:400;line-height:1.35}.tool-description{color:var(--muted-on-ink);max-width:48ch;margin:.4rem 0 0;font-size:.82rem;font-weight:300;line-height:1.45}.tool-grid{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;display:grid}.tool-button,.preset-button,.secondary-button,.primary-button{color:var(--cream);background:#f3ebe20a;border:none;border-radius:0;transition:background .14s,color .14s,box-shadow .14s}.tool-button:hover,.preset-button:hover,.secondary-button:hover,.primary-button:hover{background:#f3ebe214;transform:none}.tool-button.active,.preset-button.active{background:var(--ember-soft);color:var(--cream);box-shadow:inset 0 0 0 1px #c45c2a73}.tool-button:disabled{cursor:not-allowed;opacity:.35;box-shadow:none;background:0 0}.tool-button:disabled:hover{background:0 0}.tool-button{text-align:center;place-items:center;gap:.28rem;min-height:4.1rem;padding:.45rem .4rem;display:grid}.tool-button img{object-fit:contain;filter:contrast(1.05);width:32px;height:32px}.tool-button span{letter-spacing:.04em;font-size:.72rem;font-weight:500}.preset-row,.action-row{gap:2px;display:grid}.preset-row{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr))}.preset-button{text-align:left;padding:.5rem .55rem}.preset-art{border:1px solid var(--line);background:#0e0c0b59;border-radius:0;place-items:center;min-height:62px;margin-bottom:.35rem;display:grid}.preset-art img{object-fit:contain;max-width:100%;max-height:56px}.preset-art-fallback{color:var(--muted);font-size:.78rem}.preset-button span,.preset-button small{display:block}.preset-button span{letter-spacing:.02em;font-size:.8rem;font-weight:500}.preset-button small{color:var(--muted);margin-top:.12rem;font-size:.7rem;font-weight:300}.action-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:.45rem}.secondary-button{letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);background:0 0;padding:.5rem .55rem;font-size:.68rem;font-weight:600}.primary-button{letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(#c45c2a38,#c45c2a14);border:1px solid #c45c2a73;min-width:10rem;padding:.55rem .75rem;font-size:.68rem;font-weight:700}.primary-button:hover{background:linear-gradient(#c45c2a52,#c45c2a24);border-color:#e8945cb3}.secondary-button:hover{border-color:#c45c2a80}.secondary-button.danger{color:#e8a0a0;border-color:#e8a0a040}.stage-wrap{gap:.6rem;display:grid}.barber-stage{aspect-ratio:3/4;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;outline:1px solid var(--line);outline-offset:4px;background:linear-gradient(#f3ebe20f 0%,#0000 42%),#121110;border-radius:2px;width:min(100%,720px);margin:0 auto;position:relative;overflow:hidden}.barber-stage.tool-serum{outline-color:#78c8ff59}.barber-stage.tool-soap,.barber-stage.tool-rinse{outline-color:#b4e6ff4d}.barber-stage.tool-trimmer{outline-color:#c45c2a73}.barber-stage.tool-shine{outline-color:#ffdc9659}.barber-stage-flow-complete{filter:brightness(1.05)contrast(1.03);transition:filter .28s,box-shadow .28s;box-shadow:inset 0 0 0 1px #e8945c47,0 24px 48px #0000002e}.base-portrait,.overlay-canvas,.shine-overlay,.stage-decal{width:100%;height:100%;position:absolute;inset:0}.base-portrait,.stage-decal{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.base-portrait{object-fit:cover}.base-portrait,.overlay-canvas,.shine-overlay,.stage-decal,.particle{pointer-events:none}.hair-layer{opacity:.96}.shave-layer{opacity:.92;mix-blend-mode:screen}.barber-stage.shave-trim-photo .shave-layer{opacity:1;mix-blend-mode:normal}.foam-layer{opacity:.95}.shine-overlay{mix-blend-mode:screen;background:radial-gradient(circle at 50% 16%,#ffffff57,#0000 32%),radial-gradient(circle at 50% 55%,#fff3,#0000 38%)}.stage-decal{object-fit:cover}.clippings-decal{opacity:.12;mix-blend-mode:multiply;width:76%;height:auto;top:auto;bottom:-4%;left:12%}.sparkle-decal{opacity:0;mix-blend-mode:screen;width:60%;height:auto;top:6%;left:20%}.particle{display:block;position:absolute}.particle-hair{background:linear-gradient(#120f0e,#0a0807);border-radius:999px;min-width:2px;min-height:10px}.particle-spray,.particle-foam{border-radius:999px}.particle-spray{background:radial-gradient(circle,#91e2ffe6,#91e2ff00)}.particle-foam{background:radial-gradient(circle,#ffffffe0,#ffffff05);border:1px solid #d2f0ff80}.particle-sparkle{background:linear-gradient(90deg,#0000 46%,#fff29cf2 46% 54%,#0000 54%),linear-gradient(#0000 46%,#fff29cf2 46% 54%,#0000 54%)}.tool-cursor-overlay{object-fit:contain;pointer-events:none;opacity:0;z-index:2147483647;will-change:left, top, width, height, opacity;filter:drop-shadow(0 1px 2px #00000073);display:block;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.tool-cursor-overlay.visible{opacity:1}.site-footer{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:.65rem;padding-top:.85rem;display:flex}.site-footer-label{letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.65rem;font-weight:600}.site-footer-links{flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;display:flex}.site-footer-link{color:var(--cream);letter-spacing:.02em;align-items:center;gap:.5rem;font-size:.88rem;font-weight:500;text-decoration:none;transition:color .16s,opacity .16s;display:inline-flex}.site-footer-link:hover{color:var(--paper)}.site-footer-link:focus-visible{outline:1px solid var(--ember);outline-offset:4px}.site-footer-icon{opacity:.88;flex-shrink:0;width:1.1rem;height:1.1rem}.site-footer-link:hover .site-footer-icon{opacity:1}.stage-caption{text-align:left;max-width:42ch;margin:.65rem auto 0}.stage-caption p{color:var(--muted);text-transform:none;letter-spacing:.01em;font-size:.82rem;font-weight:300;line-height:1.55}.photo-finish-panel{gap:.45rem;max-width:42rem;margin:0 auto;display:grid}.photo-finish-button{width:100%;min-width:0}.photo-finish-button:disabled{cursor:progress;opacity:.78}.photo-finish-note{color:var(--muted);margin:0;font-size:.78rem;line-height:1.5}@media (width<=1099px){.app-shell{flex-direction:column;display:flex}.app-shell-sidebar{display:contents}.hero-copy{order:1}.stage-panel{order:2}.site-footer{order:3;margin-top:1rem}}@media (width>=1100px){.app-shell{grid-template-columns:minmax(300px,380px) minmax(0,1fr);align-items:start;gap:1.75rem;padding:1.25rem 1.5rem 1.75rem}.hero-copy{border-bottom:none;padding-bottom:0}.stage-panel{border-left:1px solid var(--line);padding-top:0;padding-left:1.75rem;position:sticky;top:1rem}}@media (width<=640px){.app-shell{padding:1rem .9rem 1.5rem}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-row,.action-row{grid-template-columns:1fr}.stage-panel{border-left:none;border-top:1px solid var(--line);margin-top:.5rem;padding-top:1.5rem;padding-left:0}.flow-step-layout{flex-direction:column}.flow-step-actions{justify-items:stretch;width:100%}.primary-button{width:100%;min-width:0}}