@font-face{font-family:Inter;src:url(/minimal-interactions/assets/Inter-Regular.ttf)}*{box-sizing:border-box}body{margin:0}.app{height:100svh;min-height:650px;position:relative;overflow:hidden;background:#090a0a;color:#efece5;font-family:Inter,sans-serif}button,a{color:inherit}button{background:none;border:0;font:inherit;cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible,[role=slider]:focus-visible{outline:2px solid currentColor;outline-offset:6px}.app header{position:absolute;z-index:4;top:0;width:100%;padding:36px 4.2%;display:flex;justify-content:space-between;align-items:center}.brand{font-size:21px;letter-spacing:.4em}header>span{font-size:11px;letter-spacing:.36em}h1{position:absolute;z-index:3;top:11%;margin:0;width:100%;text-align:center;font-size:48px;font-weight:400;letter-spacing:-.035em;pointer-events:none}.scene{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;touch-action:none;cursor:crosshair;outline-offset:-8px}.photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.dim{filter:brightness(.2)}.lit{filter:brightness(1.2);will-change:mask-image}.action-area{position:absolute;z-index:4;bottom:7%;left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}.action-area p{font-size:11px;letter-spacing:.14em;margin:0 0 22px;opacity:.7}.action-area button{pointer-events:auto}.explore{display:flex;align-items:center;gap:20px;font-size:12px;letter-spacing:.13em;opacity:0;transition:opacity .5s;padding:10px 20px;visibility:hidden}.explore.visible{opacity:1;visibility:visible}.replay{display:flex;gap:8px;align-items:center;font-size:10px;opacity:.6;margin-top:16px;padding:7px}.pull{display:flex;gap:14px;align-items:center;border:1px solid #955645;border-radius:30px;padding:12px 21px;font-size:12px;color:#8c2b24}footer{position:absolute;z-index:4;bottom:21px;left:3%;right:3%;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.1em;opacity:.6}footer nav{display:flex;gap:18px}footer button{font-size:9px;padding:5px}footer button[aria-current]{text-decoration:underline;text-underline-offset:4px}.thread{background:#efe7da;color:#513d2d;font-family:Georgia,serif}.thread h1{font-size:58px;top:9.5%;letter-spacing:-.045em}.thread .scene{cursor:grab}.thread .scene:active{cursor:grabbing}.thread .photo{will-change:clip-path,opacity}.thread .action-area{bottom:6.5%}.thread .action-area p{font-size:13px}.thread .explore{font-size:13px;border-top:1px solid #9a8775;border-radius:0;padding-top:18px}.thread .pull{font-family:Inter,sans-serif}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#0008;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:grid;place-items:center;padding:25px}.modal{position:relative;background:#121616;border:1px solid #555d5d;border-radius:16px;padding:45px;max-width:460px;color:#f5f0e8;font-family:Inter,sans-serif}.thread .modal{background:#f5eee3;color:#513d2d;border-color:#ae9982}.close{position:absolute;top:15px;right:15px;padding:5px}.modal>span{font-size:9px;letter-spacing:.25em}.modal h2{font-weight:400;letter-spacing:-.035em;font-size:34px;line-height:1.2;margin:24px 0 20px}.modal p{font-size:14px;line-height:1.6;opacity:.8}.modal small{font-size:10px;opacity:.6}.return{display:flex;align-items:center;gap:12px;padding:15px 0;margin-top:20px;font-size:12px;border-top:1px solid #9996;width:100%}@media(max-width:760px){.app{min-height:600px}header{padding:25px 22px!important}.brand{font-size:18px}header>span{font-size:9px;letter-spacing:.2em}h1{top:14%;font-size:31px;padding:0 15px}.thread h1{font-size:37px;top:13%}.photo{height:68%;top:20%;object-fit:cover;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 87%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 87%,transparent)}.lit{height:68%;top:20%}.action-area{bottom:10%;padding:0 15px}.action-area p{font-size:9px;text-align:center;line-height:1.7;margin-bottom:14px}.thread .action-area{bottom:9%}.thread .action-area p{font-size:11px}.thread .photo{height:65%;top:18%;object-fit:cover}.thread .explore{font-size:11px;padding-top:13px}.pull{padding:11px 17px;font-size:11px}.replay{margin-top:8px}footer{font-size:8px;bottom:18px;left:18px;right:18px;letter-spacing:0}footer nav{gap:8px}.modal{padding:35px 26px}.modal h2{font-size:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.photo{will-change:auto}}