@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,wght@0,500;0,600;1,500&display=swap');
:root{--sand:#e8dcc7;--sage:#8b9d83;--moss:#606c38;--ink:#303c31;--clay:#b08b6e;--line:rgba(66,73,49,.18)}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font:14px 'DM Sans',sans-serif;min-height:100dvh}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.8' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--moss);outline-offset:5px}header{height:110px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;font-weight:700;letter-spacing:1.8px;font-size:12px}.brand svg{width:32px;height:38px;fill:none;stroke:var(--moss);stroke-width:2}.brand small{display:block;font-size:10px;letter-spacing:.25px;font-weight:400;margin-top:6px;color:#6d7462}.header-right{display:flex;gap:9px;align-items:center;color:#737863;font-size:11px}.demo-dot,.live-dot{width:6px;height:6px;border-radius:100%;background:var(--moss);display:inline-block}.icon-button{border:1px solid var(--line);border-radius:50%;background:transparent;width:27px;height:27px;margin-left:15px;color:var(--ink)}main{max-width:1500px;min-height:690px;margin:auto;padding:70px 5% 45px;display:grid;grid-template-columns:.8fr 1.5fr .85fr;gap:30px;align-items:center}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--moss);margin-bottom:25px}h1{font:500 clamp(42px,4.4vw,68px)/1.07 'Fraunces',Georgia,serif;letter-spacing:-2.5px;margin:0 0 27px}h1 em{color:var(--moss);font-weight:500}.intro>p{font-size:13px;line-height:1.9;color:#727762}.intro-bottom{display:flex;align-items:flex-start;gap:12px;margin-top:53px;font-size:10px;line-height:1.8;color:#7b7e6c}.small-line{width:23px;height:1px;background:var(--sage);margin-top:8px;flex-shrink:0}.device-area{position:relative;perspective:1100px;padding:16px 0 25px}.device{position:relative;max-width:560px;margin:auto;background:linear-gradient(125deg,#414c61,#2a374e 60%,#354158);border-radius:48px 48px 54px 54px;padding:24px 27px 16px;transform:rotate(-5deg) rotateX(9deg);box-shadow:inset 2px 3px 3px #71809688,inset -2px -3px 3px #172332,0 13px 0 #202c40,0 17px 0 #1c283b,0 29px 35px #43453037;border:1px solid #475369;isolation:isolate}.device:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}.top-edge{display:flex;justify-content:space-between;font-size:7px;letter-spacing:2px;color:#b1b6bd;margin:0 10px 16px;opacity:.75}.plate{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);aspect-ratio:1;gap:4px;padding:7px;border-radius:17px;background:#c4bead;border:3px solid #202b3e;box-shadow:0 1px 0 #8e98a2,inset 1px 2px 4px #716d62}.tile{position:relative;min-width:0;border-radius:8px;background-color:#c7bfaf;border:0;padding:0;box-shadow:0 3px 1px #766f60,inset 1px 1px 1px #f1dec7;overflow:hidden}.tile.picture{background-image:url('assets/stone.svg');background-size:300% 300%;border:1px solid #d6c9ac}.tile.empty,.tile.studs{background-image:radial-gradient(circle at 50% 42%,#d6cfc0 0 32%,#b8b1a2 37%,#a49d90 42%,transparent 48%);background-size:25% 25%}.tile.empty{box-shadow:inset 0 1px 4px #756f6177}.tile.empty:after{content:attr(data-label);position:absolute;inset:0;display:grid;place-content:center;background:#3e4b3938;color:#f3e6c8;font-size:10px;font-weight:600;text-shadow:0 1px 4px #303c31}.tile.attachable{outline:2px solid #d8be7c;outline-offset:-3px;cursor:pointer}.tile.attachable:after{content:'Attach tile';background:#303c3155}.controls{display:grid;grid-template-columns:1fr .65fr 1.2fr;gap:12px;align-items:center;padding:22px 5px 10px}.button-cluster{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 10px;padding:0 3px}.answer{border:1px solid #d5c9b4;border-radius:12px;background:linear-gradient(145deg,#e5ddcc,#cabda7);color:#2c384a;font:bold 28px/1 Arial,sans-serif;height:49px;box-shadow:0 5px 0 #9c9281,0 7px 4px #101b2c88,inset 0 2px 1px #f3e8d6;transition:transform .1s,box-shadow .1s;user-select:none}.answer:active,.answer.pressed{transform:translateY(4px);box-shadow:0 1px 0 #9c9281,0 3px 4px #101b2c88}.answer:disabled{cursor:default}.middle-controls{display:flex;flex-direction:column;align-items:center;gap:13px}.scan-pad{width:57px;height:58px;border:1px solid #77829566;border-radius:14px;background:#26334955;box-shadow:inset 1px 2px 3px #18233577;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#aeb7be;font-size:7px;letter-spacing:2px}.scan-pad svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.5}.speaker{border-radius:50%;border:2px solid #1a263b;width:34px;height:34px;display:flex;gap:4px;flex-wrap:wrap;align-content:center;justify-content:center;padding:7px;box-shadow:0 1px 0 #61708766}.speaker i{width:3px;height:3px;background:#101d2d;border-radius:50%}.screen-unit{text-align:center;min-width:0}.screen-glass{padding:10px 9px;background:linear-gradient(135deg,#141c27,#0b141b);border:3px solid #1e2939;border-radius:13px;box-shadow:0 1px 1px #768293,inset 1px 2px 5px #000;position:relative}.screen-glass:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#f6edd609,transparent 60%);border-radius:10px;pointer-events:none}canvas{display:block;width:100%;height:auto;aspect-ratio:2;image-rendering:pixelated;background:#071219}.screen-unit>span{font:6px Arial,sans-serif;letter-spacing:1.5px;color:#8d99ab;display:block;margin-top:9px}.device-bottom{display:flex;justify-content:space-between;color:#8e99a9;font-size:6px;letter-spacing:1.4px;padding:8px 9px 0}.device-caption{margin-top:53px;text-align:center;font-size:9px;color:#747b66;display:flex;align-items:center;gap:8px;justify-content:center}.caption-divider{opacity:.4;margin:0 5px}.journey{align-self:center;max-width:310px;margin-left:8px}.journey-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.6px;margin-bottom:23px}.text-button{background:none;border:0;padding:0;color:#727963;font-size:10px;text-decoration:none}.text-button:hover{text-decoration:underline}.steps{display:flex;align-items:center;margin-bottom:27px}.step{display:flex;align-items:center;gap:7px;color:#8c8d77;font-size:9px;white-space:nowrap}.step b{display:grid;place-content:center;border:1px solid #b1b29b;width:23px;height:23px;border-radius:50%;font-weight:500}.step.current{color:var(--moss)}.step.current b,.step.done b{background:var(--moss);border-color:var(--moss);color:var(--sand)}.step-line{height:1px;background:var(--line);flex:1;margin:0 8px;min-width:8px}.station-panel{border:1px solid #a8ac9366;background:#d9d2ba66;border-radius:20px;padding:23px 21px}.panel-kicker{font-size:8px;letter-spacing:1.4px;color:#7b8268;margin-bottom:13px}h2{font:500 24px/1.2 'Fraunces',Georgia,serif;letter-spacing:-.5px;margin:0 0 12px}.station-panel p{font-size:11px;line-height:1.8;color:#747b65;margin:0 0 20px}.proximity-label{display:flex;justify-content:space-between;font-size:9px;margin:25px 0 12px;color:#747b65}.proximity-label strong{font-weight:500;color:var(--moss)}input[type=range]{width:100%;accent-color:var(--moss);height:4px;cursor:pointer;margin:0 0 10px}.range-labels{display:flex;justify-content:space-between;color:#8c8f78;font-size:8px;margin-bottom:25px}.primary{border:0;border-radius:9px;background:var(--moss);color:var(--sand);padding:13px 10px;width:100%;font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s}.primary:hover{background:#4e5a2d}.primary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}.secondary{border:1px solid #a7ad90;border-radius:9px;background:transparent;color:var(--moss);padding:10px;width:100%;font-size:10px;margin-top:9px}.hint{display:flex;gap:10px;padding:17px 6px 0}.hint svg{width:17px;height:20px;flex-shrink:0;fill:none;stroke:#8a9077;stroke-width:1.3;margin-top:2px}.hint p{font-size:9px;color:#898d77;line-height:1.8;margin:0}.option{display:flex;gap:9px;align-items:center;font-size:10px;color:#626c54;padding:9px 0;border-top:1px solid var(--line)}.option b{font-size:11px;color:var(--moss)}.notice{color:#8d5639!important;margin-top:13px!important;margin-bottom:0!important}.check-row{display:flex;align-items:center;gap:8px;font-size:10px;margin:12px 0 18px}.check-row input{accent-color:var(--moss)}footer{border-top:1px solid var(--line);margin:0 5%;min-height:80px;display:flex;align-items:center;gap:27px;font-size:10px;color:#7b816c}footer>div{margin-right:auto}.footer-mark{font-size:19px;margin-right:8px;color:var(--moss)}.footer-spec{font-size:8px;letter-spacing:.7px;margin-left:5px}dialog{background:var(--sand);color:var(--ink);border:1px solid #a1a58c;border-radius:24px;padding:35px;max-width:540px;width:calc(100% - 36px);box-shadow:0 25px 90px #28352144}dialog::backdrop{background:#18233388;backdrop-filter:blur(5px)}dialog h2{font-size:30px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#626c54}dialog img{display:block;max-width:100%;border-radius:15px;margin-top:18px}.close-dialog{float:right;border:0;background:none;color:var(--ink);font-size:25px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1600px){main{padding-top:100px;padding-bottom:90px}}@media(max-width:1100px){main{gap:20px;padding-left:4%;padding-right:4%;grid-template-columns:.7fr 1.4fr 1fr}.device{padding:19px;border-radius:34px}.controls{gap:8px;padding-top:18px}.answer{height:40px;font-size:23px;border-radius:9px}.button-cluster{gap:10px 7px}.screen-glass{padding:8px 5px}.scan-pad{width:43px;height:48px}.journey{margin-left:0}.station-panel{padding:20px 16px}h1{font-size:46px}.intro>p{font-size:11px}.eyebrow{font-size:7px;letter-spacing:1.3px}.footer-spec{display:none}}@media(max-width:800px){header{height:85px}.header-right{font-size:0;gap:0}.icon-button{font-size:12px}main{grid-template-columns:1fr 1fr;padding:35px 6% 35px;gap:40px 30px;min-height:0}.intro{grid-column:1/-1;text-align:center}.intro h1{font-size:48px;letter-spacing:-2px}.intro h1 br{display:none}.intro p{font-size:12px;margin:0}.intro p br{display:none}.eyebrow{margin-bottom:16px;font-size:8px}.intro-bottom{display:none}.device-area{padding:10px 0 20px;align-self:center}.journey{max-width:none}.device-caption{font-size:8px}.caption-divider,.device-caption .caption-divider+*{display:none}.device{padding:18px 14px}.controls{grid-template-columns:1fr .5fr 1.1fr;gap:5px}.answer{height:34px;font-size:21px}.button-cluster{gap:8px 6px}.scan-pad{width:33px;height:38px;font-size:6px}.scan-pad svg{width:24px;height:24px}.speaker{height:25px;width:25px;padding:4px;gap:3px}.speaker i{width:2px;height:2px}.top-edge{font-size:5px;letter-spacing:1px;margin-bottom:12px}.device-bottom{font-size:4px;letter-spacing:1px}.screen-glass{border-width:2px;padding:7px 4px;border-radius:8px}.screen-unit>span{font-size:5px}.tile{border-radius:5px}.plate{gap:3px;padding:5px}.footer-spec{display:none}footer{gap:18px;font-size:9px;flex-wrap:wrap;padding:20px 0}.text-button{font-size:9px}}@media(max-width:560px){main{grid-template-columns:1fr;padding-top:29px;gap:23px}.intro{grid-column:auto}.intro h1{font-size:44px}.intro p{max-width:260px;margin:auto;line-height:1.7}.device-area{width:100%;max-width:380px;margin:auto;padding:15px 12px 14px}.device{padding:21px 20px 15px}.controls{padding-top:19px;gap:10px}.answer{height:43px;font-size:26px}.button-cluster{gap:11px 9px}.scan-pad{width:43px;height:48px}.scan-pad svg{width:29px;height:29px}.speaker{width:29px;height:29px}.device-caption{margin-top:43px}.top-edge{font-size:6px}.device-bottom{font-size:5px}.journey{width:100%;max-width:380px;margin:auto}.journey-heading{margin-bottom:15px}.steps{margin-bottom:18px}.station-panel{padding:23px}.station-panel p{font-size:12px}.step{font-size:10px}.option{font-size:12px}footer{justify-content:center;gap:20px}footer>div{width:100%;margin:0;text-align:center}.hint{padding-top:13px}.hint p{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.variant-link{font-size:10px;color:inherit;text-decoration:none;margin-right:12px;border:1px solid var(--line);padding:8px 10px;border-radius:6px}.variant-link:hover{text-decoration:underline}@media(max-width:560px){.variant-link{font-size:8px;max-width:105px;line-height:1.5;margin-right:0}}