:host{color-scheme:dark;font-family:Arial,system-ui,sans-serif;color:#f0f0eb;background:#111210;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}header{height:76px;padding:0 5vw;border-bottom:1px solid #353630;display:flex;align-items:center;justify-content:space-between;direction:ltr}header .brand{font-size:22px;letter-spacing:6px;font-weight:700;text-decoration:none}header>span{font-size:14px;color:#bac19f}.feature-content{max-width:1020px;margin:auto;padding:28px 32px 16px}.heading{display:flex;justify-content:space-between;align-items:flex-end;direction:ltr;margin-bottom:22px}.eyebrow{margin:0 0 5px;color:#bcc1b1;font-size:12px;letter-spacing:2px}h1{font-size:clamp(32px,5vw,48px);letter-spacing:5px;line-height:1;margin:0}.instruction{font-size:16px;margin:0;text-align:right;direction:rtl;line-height:1.65}.instruction span{font-size:14px;color:#afb2a7}.workspace{border:1px solid #393b34;border-radius:10px;overflow:hidden}.stage-wrap{position:relative;background:#fff;min-width:0;color:#161915}.stage{position:relative;width:100%;max-width:660px;aspect-ratio:1;margin:auto;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:-4px}.stage.dragging{cursor:grabbing}.stage.zoomed{touch-action:none}.photo{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#fff;display:block;user-select:none;-webkit-user-select:none;pointer-events:none}.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.fallback[hidden]{display:none}.view-label{position:absolute;top:20px;left:22px;display:flex;align-items:center;gap:14px;font-size:14px;pointer-events:none;background:#fffffff2;padding:7px 10px;border-radius:5px}.view-label #count{font-size:12px;color:#70736b;letter-spacing:1px}.load-status{position:absolute;top:20px;right:22px;background:#f2f3ee;padding:7px 10px;font-size:14px;border-radius:5px}.load-status[hidden]{display:none}.image-note{position:absolute;bottom:18px;left:22px;color:#777e70;font-size:12px;pointer-events:none}.nav{position:absolute;top:48%;width:42px;height:46px;display:grid;place-items:center;font-size:29px;line-height:1;border:1px solid #dddeda;border-radius:50%;background:#fffffff0;color:#32372c}.previous{left:16px}.next{right:16px}.nav:hover,.zoom:hover{background:#e9ecdf}.zoom{position:absolute;bottom:14px;right:16px;background:#f4f5f0;border:1px solid #d9ddd2;border-radius:22px;color:#263020;font-size:14px;padding:10px 16px;display:flex;gap:7px;align-items:center}.zoom span{font-size:20px;line-height:14px}.controls{padding:18px 24px 16px;background:#191b17}.thumbnails{display:flex;justify-content:center;gap:8px}.thumb{display:block;flex:0 1 58px;width:58px;aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:6px;background-image:url('hoodie-angles.png');background-size:400% 200%;background-repeat:no-repeat;box-shadow:0 0 0 1px #54584a;opacity:.65;transition:opacity .15s,box-shadow .15s}.thumb[aria-pressed=true]{opacity:1;box-shadow:0 0 0 2px #d6dfb4}.thumb:hover{opacity:1}.scrub{max-width:540px;margin:18px auto;display:flex;align-items:center;gap:14px;direction:ltr}.scrub span{font-size:12px;color:#a1a895}input[type=range]{width:100%;height:24px;accent-color:#d6dfb4;cursor:ew-resize}.actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.actions button{border:1px solid #494e3e;background:#262a20;color:#e1e6d5;padding:10px 22px;border-radius:6px;font-size:14px;min-height:42px}.actions button.selected{background:#d6dfb4;color:#151a0e;border-color:#d6dfb4}.actions button[aria-pressed=true]{border-color:#d6dfb4;color:#d6dfb4}#help{font-size:14px;color:#a9af9e;text-align:center;line-height:1.65;margin:14px 0 0}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;color:#a0a797;font-size:12px;line-height:1.7}footer p{margin:0}footer a{white-space:nowrap;color:#bac1aa;text-underline-offset:4px}:focus-visible{outline:3px solid #9baf68;outline-offset:4px}.stage:focus-visible{outline-offset:-4px}@media(min-width:1000px){.stage{max-width:min(660px,65vh)}}@media(max-width:650px){header{height:62px;padding:0 18px}header .brand{font-size:19px;letter-spacing:4px}.feature-content{padding:22px 12px 16px}.heading{padding:0 4px;margin-bottom:18px}.eyebrow{font-size:12px;letter-spacing:1px}.instruction{font-size:14px}.instruction span{font-size:12px}h1{font-size:31px}.controls{padding:16px 12px}.thumbnails{gap:6px}.thumb{flex-basis:40px;width:40px}.view-label{top:12px;left:10px;padding:5px 8px;font-size:14px;gap:9px}.view-label #count{font-size:12px}.load-status{top:12px;right:10px;font-size:12px}.nav{width:36px;height:38px;font-size:25px}.previous{left:8px}.next{right:8px}.zoom{bottom:10px;right:10px;padding:8px 12px}.image-note{bottom:15px;left:14px;font-size:12px}footer{align-items:flex-start;gap:14px;font-size:12px}#help{font-size:14px}.actions button{padding:9px 16px}.scrub{margin:14px auto}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

:host .instruction{direction:ltr;text-align:left}:host .view-label{max-width:65%}:host .load-status{top:58px}