.tryon{min-height:calc(100svh - 64px);padding:clamp(28px,6vw,80px) 0 clamp(36px,6vw,72px);position:relative;overflow:clip}.tryon .wrap{position:relative}.tryon h1{color:#fff;letter-spacing:-.03em;margin:0 0 14px;font-size:clamp(2.6rem,9vw,4.6rem);line-height:1.02}.tryon-intro{max-width:640px}.tryon-intro-grid{align-items:center;gap:28px;display:grid}.tryon-intro-grid[hidden]{display:none}@media (width>=900px){.tryon-intro-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:60px}}.tryon-phone{aspect-ratio:9/18.5;background:linear-gradient(145deg,#2b3436,#0b1112 40%,#1d2628);border-radius:42px;justify-self:center;width:min(62vw,300px);padding:10px;animation:7s ease-in-out infinite tryon-float;transform:perspective(1200px)rotateY(-10deg)rotateX(4deg);box-shadow:0 40px 90px -30px #000000e6,inset 0 0 0 1px #ffffff1f,0 0 60px -20px #2ad2c980}@media (width<=899px){.tryon-phone{width:min(56vw,240px)}}@keyframes tryon-float{50%{transform:perspective(1200px)rotateY(-4deg)rotateX(2deg)translateY(-8px)}}.phone-screen{background-position:45.5% 30%;background-size:415%;border-radius:33px;height:100%;position:relative;overflow:hidden}.phone-screen:before{content:"";background:radial-gradient(120% 30% at 50% 20%,#0000 50%,#00000080 100%);position:absolute;inset:0}.phone-screen svg{width:88%;position:absolute;top:20%;left:6%;transform:translateY(-50%)}.phone-screen path{fill:none;stroke:var(--tiffany);stroke-width:2px;filter:drop-shadow(0 0 4px #2ad2c9e6);animation:4s ease-in-out infinite tryon-lock}@keyframes tryon-lock{0%,30%{stroke:#fffc;stroke-dasharray:5 5}45%,to{stroke:var(--tiffany);stroke-dasharray:none}}.phone-pill{white-space:nowrap;color:#001a18;background:#2ad2c9e6;border-radius:999px;padding:5px 12px;font-size:.66rem;font-weight:700;position:absolute;top:7%;left:50%;transform:translate(-50%)}.phone-shutter{background:#ffffffe6;border-radius:50%;width:44px;height:44px;margin-left:-22px;position:absolute;bottom:6%;left:50%;box-shadow:0 0 0 4px #0000004d,0 0 0 6px #ffffffb3}@media (prefers-reduced-motion:reduce){.tryon-phone,.phone-screen path{animation:none}}.tryon-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:26px 0 0;padding:0;list-style:none;display:grid}.tryon-steps li{color:#b9c8c6;-webkit-backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:18px;padding:12px;font-size:.78rem;line-height:1.4}@media (width>=640px){.tryon-steps li{padding:16px;font-size:.88rem}}.tryon-steps li span{color:#fff;background:linear-gradient(145deg,#2ad2c959,#2ad2c914);border:1px solid #2ad2c999;border-radius:50%;place-items:center;width:30px;height:30px;margin-bottom:8px;font-size:.85rem;font-weight:700;display:grid}.tryon-steps li strong{color:#fff;margin-bottom:2px;font-size:.92rem;display:block}.tryon-actions{flex-wrap:wrap;gap:10px;margin:22px 0 0;display:flex}.tryon-actions .button{white-space:nowrap;flex:140px;padding-left:14px;padding-right:14px}.tryon-actions label.button{cursor:pointer}.tryon-status{color:#c9d4d3;min-height:1.4em;margin:12px 0 0;font-size:.9rem}.tryon-status.error{color:#ffb4a8}.tryon-private{color:#9fb4b2;align-items:center;gap:8px;margin:6px 0 0;font-size:.86rem;display:flex}.tryon-private svg,.tryon-how h3 svg{width:16px;height:16px;color:var(--tiffany);flex:none}.tryon-desk{color:#7f9593;margin-top:10px;font-size:.86rem;display:none}@media (hover:hover) and (pointer:fine){.tryon-desk{display:block}}.tryon-result-grid{gap:22px;display:grid}@media (width>=900px){.tryon-result-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;gap:40px}}.result-stage{aspect-ratio:2/1.05;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;background:#000;border:1px solid #ffffff24;border-radius:22px;position:relative;overflow:hidden;box-shadow:0 30px 80px -30px #000c,inset 0 0 0 1px #2ad2c91f}.result-stage[data-view=left],.result-stage[data-view=right]{aspect-ratio:4/3}.result-stage canvas{width:100%;height:100%;display:block}.result-stage:after{content:"";pointer-events:none;animation:tryon-glint 5s var(--ease) 1.4s infinite;background:linear-gradient(115deg,#0000 30%,#ffffff1f 45%,#0000 60%);position:absolute;inset:0;transform:translate(-100%)}@keyframes tryon-glint{0%,70%{transform:translate(-100%)}to{transform:translate(100%)}}.result-badge,.result-hint{-webkit-backdrop-filter:blur(10px);color:#fff;pointer-events:none;background:#0408098c;border:1px solid #ffffff29;border-radius:999px;padding:6px 12px;font-size:.78rem;position:absolute}.result-badge{font-weight:600;top:12px;left:12px}.result-hint{color:#c9d4d3;padding:4px 10px;font-size:.7rem;transition:opacity .3s;bottom:10px;right:10px}.result-stage.holding .result-badge{color:#001a18;background:#2ad2c9d9}.result-stage.holding .result-badge:before{content:"Before · "}.result-stage.comparing .result-hint{opacity:0}.split-handle{pointer-events:none;background:#fff;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;box-shadow:0 0 14px #2ad2c9e6}.split-handle span{background:#ffffffe6;border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;position:absolute;top:50%;left:50%;box-shadow:0 6px 18px #0006}.split-handle span:before{content:"‹ ›";color:#0b1112;white-space:pre;place-items:center;font-weight:700;display:grid;position:absolute;inset:0}.view-tabs{scrollbar-width:none;gap:6px;margin-top:12px;display:flex;overflow-x:auto}.view-tabs button{all:unset;cursor:pointer;white-space:nowrap;color:#c9d4d3;background:#ffffff0a;border:1px solid #ffffff29;border-radius:999px;padding:8px 14px;font-size:.84rem}.view-tabs button[aria-pressed=true]{color:#0b1112;background:#fff;border-color:#fff}.view-tabs [data-compare]{margin-left:auto}.view-tabs [data-compare][aria-pressed=true]{background:var(--tiffany);border-color:var(--tiffany)}.film{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;display:grid}.film button{all:unset;cursor:pointer;transition:transform .3s var(--ease), border-color .3s;background:#000;border:1px solid #ffffff1f;border-radius:14px;position:relative;overflow:hidden}.film button[aria-pressed=true]{border-color:var(--tiffany);transform:translateY(-2px);box-shadow:0 0 24px -8px #2ad2c9e6}.film canvas{aspect-ratio:2/1.05;width:100%;display:block}.film span{text-align:center;color:#c9d4d3;background:#ffffff0a;padding:6px 4px;font-size:.7rem;display:block}.tryon-panel h2{margin:0 0 16px;font-size:clamp(1.8rem,4vw,2.6rem)}.lab-hud.static{pointer-events:auto;position:static}.tryon-panel .session-control{margin-top:18px}.tryon-panel .tryon-actions{margin-top:20px}.find-salon{color:#fff;margin-top:10px}.find-salon svg,.tryon-actions svg,.tryon-next svg{width:18px;height:18px}.tryon-explain{gap:14px;display:grid}@media (width>=760px){.tryon-explain{grid-template-columns:repeat(3,1fr)}}.tryon-explain article{padding:22px}.tryon-explain h3{margin:6px 0 8px}.tryon-explain p{color:#4a5b59;margin:0}.step-n{color:var(--tiffany-deep);font-size:2.4rem;font-weight:200;line-height:1}.tryon-how{gap:20px;margin-top:16px;padding:24px;display:grid}@media (width>=760px){.tryon-how{grid-template-columns:1fr 1fr;gap:40px}}.tryon-how h3{align-items:center;gap:8px;margin:0 0 8px;display:flex}.tryon-how p{color:#4a5b59;margin:0}.tryon-next{flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px;display:flex}html.tryon-locked,html.tryon-locked body{overflow:hidden}.tryon-camera,.tryon-working{z-index:2147483001;color:#fff;background:#000;position:fixed;inset:0}.tryon-camera[hidden],.tryon-working[hidden]{display:none}.tryon-camera video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.cam-shade{pointer-events:none;background:radial-gradient(120% 34% at 50% 36%,#0000 55%,#0000008c 100%);position:absolute;inset:0}.cam-guide{pointer-events:none;width:min(88vw,560px);position:absolute;top:36%;left:50%;transform:translate(-50%,-50%)}.cam-guide svg{width:100%;height:auto;display:block;overflow:visible}.cam-guide .almond{fill:none;stroke:#ffffffd9;stroke-width:1.6px;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;transition:stroke .3s}.cam-guide line{stroke:#ffffff59;stroke-width:1px;vector-effect:non-scaling-stroke}.tryon-camera.aligned .almond{stroke:var(--tiffany);stroke-dasharray:none;filter:drop-shadow(0 0 6px #2ad2c9e6)}.cam-top{padding:max(14px, env(safe-area-inset-top)) 14px 14px;flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;top:0;left:0;right:0}.cam-close{all:unset;cursor:pointer;left:14px;top:max(14px, env(safe-area-inset-top));-webkit-backdrop-filter:blur(10px);background:#0006;border:1px solid #fff3;border-radius:50%;place-items:center;width:42px;height:42px;font-size:1.6rem;display:grid;position:absolute}.cam-status{-webkit-backdrop-filter:blur(12px);text-align:center;background:#00000073;border:1px solid #ffffff2e;border-radius:999px;margin:4px 56px 0;padding:9px 16px;font-size:.95rem;font-weight:600;transition:background .3s}.tryon-camera.aligned .cam-status{color:#001a18;background:#2ad2c9d9}.cam-bottom{padding:14px 14px max(22px, env(safe-area-inset-bottom));background:linear-gradient(#0000,#0000008c);flex-direction:column;align-items:center;gap:14px;display:flex;position:absolute;bottom:0;left:0;right:0}.cam-tip{color:#dfe8e7;text-align:center;margin:0;font-size:.85rem}.cam-shutter{all:unset;cursor:pointer;background:#ffffffe6;border-radius:50%;width:76px;height:76px;position:relative;box-shadow:0 0 0 5px #00000059,0 0 0 8px #ffffffb3}.cam-shutter[disabled]{opacity:.4}.cam-shutter .ring{--p:0;background:conic-gradient(var(--tiffany) calc(var(--p) * 360deg), transparent 0);border-radius:50%;position:absolute;inset:-10px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px))}.cam-flash{opacity:0;pointer-events:none;background:#fff;position:absolute;inset:0}.tryon-camera.flash .cam-flash{animation:.4s ease-out tryon-flash}@keyframes tryon-flash{0%{opacity:.9}to{opacity:0}}.tryon-working canvas{width:100%;height:100%;position:absolute;inset:0}.tryon-working p{left:0;right:0;bottom:max(40px, env(safe-area-inset-bottom));justify-content:center;align-items:center;gap:10px;font-weight:600;display:flex;position:absolute}.spinner{border:2px solid #ffffff40;border-top-color:var(--tiffany);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite tryon-spin}@keyframes tryon-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.result-stage:after{animation:none}}