/* Scoped copies of the standalone showcase styles. Keep source files independent. */

/* ui-options.css */
#interaction-design{--paper:#f7f5ee;--ink:#293c33;--muted:#59695e;--line:#d5dccf;--gold:#ffd49e;--plum:#35232b}
#interaction-design *{box-sizing:border-box}
#interaction-design{scroll-behavior:smooth;scroll-padding-top:25px}
#interaction-design{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 Nunito,Arial,sans-serif}
#interaction-design a{color:inherit;text-underline-offset:4px}
#interaction-design button{font:inherit;cursor:pointer;color:inherit}
#interaction-design button:focus-visible,#interaction-design a:focus-visible,#interaction-design summary:focus-visible{outline:3px solid #a05d29;outline-offset:5px}
#interaction-design img{display:block;max-width:100%}
#interaction-design [hidden]{display:none!important}
#interaction-design h1,#interaction-design h2,#interaction-design h3,#interaction-design h4,#interaction-design p{margin:0}
#interaction-design h1,#interaction-design h2{font:400 64px/1.07 Georgia,serif;letter-spacing:-2.8px}
#interaction-design h2{font-size:46px;letter-spacing:-1.8px}
#interaction-design em{font-weight:400;color:#58735e}
#interaction-design .wrap{width:min(1280px,calc(100% - 88px));margin-inline:auto}
#interaction-design .skip{position:absolute;left:20px;top:-100px;z-index:10;background:white;padding:12px}
#interaction-design .skip:focus{top:10px}
#interaction-design header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:28px;border-bottom:1px solid var(--line)}
#interaction-design .brand{display:flex;gap:9px;align-items:center;text-decoration:none;font-weight:900;font-size:23px;letter-spacing:-.6px}
#interaction-design .brand span{font-size:11px;font-weight:600;letter-spacing:0;color:var(--muted)}
#interaction-design nav{display:flex;gap:24px}
#interaction-design nav a,#interaction-design .back{font-size:12px;text-decoration:none}
#interaction-design .back{border-bottom:1px solid var(--ink)}
#interaction-design .hero{padding-block:48px 35px}
#interaction-design .hero-top{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:35px}
#interaction-design .eyebrow{font-size:9px;letter-spacing:2px;font-weight:900;margin-bottom:17px}
#interaction-design .hero-aside p{font-size:14px;color:var(--muted);margin-bottom:20px}
#interaction-design .hero-aside a{font-size:12px;font-weight:800;text-decoration:none;border-bottom:1px solid #aab9a6;padding-bottom:8px}
#interaction-design .hero-canvas{height:575px;position:relative;background-color:#e1e8d9;background-image:linear-gradient(#82957314 1px,transparent 1px),linear-gradient(90deg,#82957314 1px,transparent 1px);background-size:30px 30px;border:1px solid #cbd7c2;border-radius:12px;overflow:hidden}
#interaction-design .canvas-note,#interaction-design .canvas-corner{position:absolute;left:27px;top:22px;font-size:9px;letter-spacing:1.8px;font-weight:800;color:#61745d}
#interaction-design .canvas-corner{top:auto;bottom:22px;font-size:8px}
#interaction-design .hero-desktop{position:absolute;width:72%;left:5%;top:65px;border-radius:10px;background:#fcfaf3;padding:9px;box-shadow:0 20px 40px #334b3226;transform:rotate(-2deg)}
#interaction-design .window-bar{display:flex;align-items:center;gap:5px;padding:2px 7px 10px}
#interaction-design .window-bar i{width:5px;height:5px;border-radius:50%;background:#bbc2b6}
#interaction-design .window-bar span{margin-left:10px;font-size:8px;color:var(--muted)}
#interaction-design .zoom{display:block;width:100%;border:0;padding:0;background:transparent;cursor:zoom-in;border-radius:5px;overflow:hidden}
#interaction-design .zoom img{width:100%}
#interaction-design .hero-phone{position:absolute;width:17%;right:5%;top:63px;border:6px solid #3d3c36;border-radius:26px;overflow:hidden;box-shadow:0 20px 40px #293a3333;transform:rotate(5deg);background:#363138}
#interaction-design .phone-island{position:absolute;width:35%;height:11px;top:0;left:32%;background:#3d3c36;border-radius:0 0 10px 10px}
#interaction-design .annotation{display:flex;align-items:center;gap:12px;background:#fffaf0;border:1px solid #e0d7c5;box-shadow:0 8px 25px #233b2010;padding:15px 20px;border-radius:5px}
#interaction-design .annotation b,#interaction-design .annotation small{display:block}
#interaction-design .annotation b{font-size:14px}
#interaction-design .annotation small{font-size:10px;color:var(--muted)}
#interaction-design .pin{display:inline-grid;place-items:center;flex-shrink:0;background:#ecd093;width:27px;height:27px;border-radius:50%;font:15px Georgia,serif;color:var(--plum)}
#interaction-design .hero-annotation{position:absolute;bottom:52px;left:11%;transform:rotate(2deg)}
#interaction-design .hero-annotation:before{content:'';width:1px;height:60px;background:#647e64;position:absolute;bottom:100%;left:35px}
#interaction-design .swatch-sticker{position:absolute;right:25%;bottom:27px;width:175px;background:#fbf7ec;padding:12px;transform:rotate(-5deg);display:flex;flex-wrap:wrap;gap:4px;box-shadow:0 7px 20px #293c331a}
#interaction-design .swatch-sticker>span{height:33px;flex:1;border-radius:2px}
#interaction-design .swatch-sticker small{font-size:6px;font-weight:900;letter-spacing:1px;margin-top:4px}
#interaction-design .hero-cat{position:absolute;bottom:-40px;right:-30px;width:230px;pointer-events:none}
#interaction-design .board-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-block:0 55px}
#interaction-design .board-nav>a{border:1px solid var(--line);border-radius:7px;background:#fffcf5;text-decoration:none;padding:18px 20px;transition:transform .2s}
#interaction-design .board-nav>a:hover{transform:translateY(-5px)}
#interaction-design .board-nav>a>span{font-size:8px;letter-spacing:1px;font-weight:900}
#interaction-design .board-nav strong{display:block;font-size:13px;margin-top:12px}
#interaction-design .mini-flow,#interaction-design .mini-wire,#interaction-design .mini-palette{display:flex;align-items:center;gap:7px;height:48px;padding-top:10px}
#interaction-design .mini-flow i{width:33px;height:25px;background:#dce6d5;border:1px solid #aabca1;border-radius:4px}
#interaction-design .mini-flow i:last-child{background:#f1d6a4}
#interaction-design .mini-wire i{width:34px;height:32px;border:1px solid #9a9ea5;background:repeating-linear-gradient(#e6e5ec 0 6px,#c7c8d0 7px 8px);border-radius:3px}
#interaction-design .mini-palette i{width:29px;height:29px;border-radius:50%;background:var(--gold)}
#interaction-design .mini-palette i:nth-child(2){background:#ffcab0}
#interaction-design .mini-palette i:nth-child(3){background:#514650}
#interaction-design .mini-palette i:nth-child(4){background:#b9cfbd}
#interaction-design .mini-control{background:var(--gold);border:1px solid #d2b17d;border-radius:6px;font:12px Fredoka;padding:7px 10px;box-shadow:0 3px 0 #b59a7b;margin:17px 0 6px;max-width:165px;display:flex;justify-content:space-between;gap:8px}
#interaction-design .section{padding-block:65px;border-top:1px solid var(--line)}
#interaction-design .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
#interaction-design .status{font-size:8px;letter-spacing:1px;line-height:1.5;font-weight:800;border:1px solid #bfc9b7;padding:7px 10px;border-radius:4px;max-width:270px}
#interaction-design .board-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:8px;letter-spacing:1px;padding-bottom:18px}
#interaction-design .board-top>span{font-size:7px;color:var(--muted)}
#interaction-design .journey-board{background:#e8eddf;border:1px solid #cdd9c3;border-radius:8px;padding:26px}
#interaction-design .journey-track{display:grid;grid-template-columns:repeat(4,1fr);gap:23px}
#interaction-design .journey-number{font:23px Georgia,serif;display:flex;align-items:center;gap:10px;margin:8px 0 14px}
#interaction-design .journey-number span{font:800 8px Nunito;letter-spacing:1px}
#interaction-design .journey-track article{position:relative;min-width:0}
#interaction-design .journey-track article:not(:last-child):after{content:'→';position:absolute;right:-20px;top:120px;font-size:20px;color:#728c6b}
#interaction-design .journey-track .zoom{border:5px solid #fbfaf4;box-shadow:0 6px 15px #40533818}
#interaction-design .journey-track img{aspect-ratio:1.6;object-fit:contain;background:#29252b}
#interaction-design .journey-track h3{font:italic 22px Georgia,serif;margin:18px 0 12px}
#interaction-design .journey-chip{font-size:10px;color:#4a6351}
#interaction-design .journey-curve{margin-top:25px;padding:16px 10px 14px;border-top:1px solid #c9d5bf}
#interaction-design .journey-curve>span{font-size:7px;font-weight:900;letter-spacing:1px}
#interaction-design .journey-curve svg{width:100%;height:100px;display:block}
#interaction-design .journey-curve>div{display:grid;grid-template-columns:repeat(4,1fr);font-size:9px;color:#526e59}
#interaction-design .journey-curve>div b:not(:first-child){text-align:center}
#interaction-design .journey-curve>div b:last-child{text-align:right}
#interaction-design .journey-footer{border-top:1px solid #c9d5bf;padding-top:17px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#526451}
#interaction-design .caption{font-size:10px;color:var(--muted);margin-top:14px}
#interaction-design .lavender{background:#eeedf3;border-color:#dcdbe4}
#interaction-design .lavender em{color:#736b85}
#interaction-design .segmented{display:flex;gap:4px;padding:5px;background:#ffffff80;border:1px solid #cbcbd3;border-radius:7px;flex-shrink:0}
#interaction-design .segmented button{border:0;background:transparent;padding:9px 16px;border-radius:4px;font-size:11px;min-height:40px}
#interaction-design .segmented button[aria-pressed=true]{background:var(--ink);color:#fff9ed}
#interaction-design .wireframes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#interaction-design .wire-card{border:1px solid #c9c8d1;padding:20px;background:#fbfaf7;border-radius:7px;position:relative}
#interaction-design .wire-card .board-top{border-bottom:0}
#interaction-design .wire-content{height:330px;display:flex;flex-direction:column;justify-content:center;padding:22px 14px;position:relative;color:#67707a}
#interaction-design .wire-title{font:25px Fredoka,sans-serif;text-align:center;margin-bottom:9px}
#interaction-design .wire-sub{text-align:center;font-size:9px;margin-bottom:13px}
#interaction-design .wire-button{padding:8px 15px;font-size:11px;font-weight:800;text-align:center;border:1px solid #a5aab0;border-radius:6px;margin:4px 14px;background:#ececef;min-height:35px}
#interaction-design .primary-wire{border:2px solid #7b8390;background:#d6d8df}
#interaction-design .wire-settings{margin:8px 14px;font-size:10px;text-align:center;border:1px dashed #a5aab0;border-radius:4px;padding:7px}
#interaction-design .wire-point{position:absolute;right:0;top:44%;display:grid;place-items:center;border-radius:50%;background:#d8d4e8;color:#554e6c;width:23px;height:23px;border:1px solid #9189a7;font-size:11px}
#interaction-design .wire-cats{display:flex;gap:8px;margin:14px 0}
#interaction-design .wire-cats>div{flex:1;min-width:0;border:1px solid #9ca3ac;background:#e5e6e9;border-radius:6px;overflow:hidden}
#interaction-design .wire-cats svg{width:100%;height:90px;fill:#d5d7dc;stroke:#9199a5;stroke-width:1.5;margin-top:10px}
#interaction-design .wire-cats span{display:block;border-top:1px solid #9ca3ac;font-size:10px;padding:8px;text-align:center}
#interaction-design .wire-cats .chosen-wire{border:2px solid #7a7390;background:#d9d6e2}
#interaction-design .wire-modes{display:flex;justify-content:center;gap:15px;font-size:10px;margin:13px 0}
#interaction-design .wire-modes b{background:#d6d8df;padding:3px 12px;border-radius:4px}
#interaction-design .wire-worlds{display:flex;gap:10px;margin:8px 0 18px}
#interaction-design .wire-worlds>div{width:50%;border:1px solid #a5aab0;border-radius:5px;overflow:hidden}
#interaction-design .wire-worlds svg{width:100%;height:80px;fill:#c1c5cc;background:#e4e5e9}
#interaction-design .wire-worlds b,#interaction-design .wire-worlds small{display:block;margin:4px 8px;font-size:10px}
#interaction-design .wire-worlds small{font-size:8px;margin-bottom:9px}
#interaction-design .wire-caption{display:flex;align-items:center;gap:9px;border-top:0;padding-top:17px;font-size:11px}
#interaction-design .wire-caption .pin{width:22px;height:22px;font-size:12px;background:#ded8eb}
#interaction-design .finished{display:none;height:330px;background:#29262b}
#interaction-design .finished .zoom{height:100%}
#interaction-design .finished img{height:100%;object-fit:contain}
#interaction-design [data-fidelity=final] .wire-content{display:none}
#interaction-design [data-fidelity=final] .finished{display:block}
#interaction-design .design-board{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
#interaction-design .design-board>div{border:1px solid var(--line);border-radius:8px;padding:23px;overflow:hidden}
#interaction-design .type-tile{background:#eee8dd}
#interaction-design .big-aa{font:95px/.95 Fredoka;color:#3c4e3e;display:flex;align-items:end;gap:14px;margin:15px 0}
#interaction-design .big-aa span{font:13px Nunito;padding-bottom:5px}
#interaction-design .type-tile h3{font:24px Fredoka}
#interaction-design .type-bottom{border-top:1px solid #cfc8b8;padding-top:16px;margin-top:25px}
#interaction-design .type-bottom>span{font-size:8px;letter-spacing:1px}
#interaction-design .type-bottom p{font-size:19px;line-height:1.4;margin-top:10px}
#interaction-design .palette-tile{background:#fffaf0}
#interaction-design .palette-bars{display:flex;flex-direction:column;border-radius:5px;overflow:hidden}
#interaction-design .palette-bars>div{background:var(--color);color:var(--label);height:70px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#interaction-design .palette-bars b{font-size:12px}
#interaction-design .palette-bars span{font:9px monospace}
#interaction-design .icon-tile{background:#343037;color:#fff3dc}
#interaction-design .icon-tile .board-top>span{color:#ddd0c5}
#interaction-design .icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 15px;padding-top:25px}
#interaction-design .icon-grid>div{text-align:center}
#interaction-design .icon-grid img{width:45px;height:45px;object-fit:contain;margin:0 auto 10px}
#interaction-design .icon-grid span{font-size:10px}
#interaction-design .states-tile{grid-column:1/-1;background:#302b32;color:#fff3dc}
#interaction-design .states-tile .board-top>span{color:#d5c4c0}
#interaction-design .state-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:23px 35px;padding:5px 10px 14px}
#interaction-design .state-matrix>div>span{display:block;color:#dccfc6;font-size:9px;letter-spacing:.5px;margin-bottom:10px}
#interaction-design .game-btn{display:flex;align-items:center;justify-content:center;gap:15px;border:2px solid #b8a399;background:#514650;color:#fff3dc;border-radius:13px;box-shadow:0 4px 0 #1c1820;font:21px Fredoka;padding:13px 18px;min-height:57px;position:relative}
#interaction-design .game-btn b{position:absolute;right:13px;font:700 13px Nunito;background:#35232b;color:var(--gold);border-radius:50%;padding:1px 5px}
#interaction-design .is-hover{background:#63545c;border-color:#fff3dc}
#interaction-design .is-focus{outline:3px solid #fff3dc;outline-offset:-6px}
#interaction-design .is-selected{background:var(--gold);color:#35232b;border-color:var(--gold);box-shadow:0 4px 0 #9b6655,inset 0 0 0 2px #fff0d3}
#interaction-design .is-selected.is-focus{outline-color:#35232b}
#interaction-design .is-disabled{opacity:.45;box-shadow:none}
#interaction-design .worlds-tile{grid-column:1/-1;background:#e7ecdf}
#interaction-design .world-library{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}
#interaction-design .world-library>div{border:1px solid #9fae96;border-radius:7px;overflow:hidden;background:#fbf8ef}
#interaction-design .world-library img{width:100%;aspect-ratio:1.2;object-fit:cover;background:#bacab3}
#interaction-design .world-library b{display:block;font:18px Fredoka;margin:12px 12px 3px}
#interaction-design .world-library span{display:block;margin:0 12px 12px;font-size:7px;letter-spacing:1px;color:#687660}
#interaction-design .dark{background:#29382f;color:#f7f1e5;border-color:#29382f}
#interaction-design .dark em{color:#c3d5af}
#interaction-design .dark .status{border-color:#75806c;color:#d4dfc6}
#interaction-design .prototype-layout{display:grid;grid-template-columns:1fr 300px;gap:22px}
#interaction-design .playground{background:#242128;border:1px solid #62675b;border-radius:9px;overflow:hidden}
#interaction-design .playground>.board-top{padding:15px 22px;background:#344236;color:#e0e8d5}
#interaction-design .reset{background:transparent;border:0;color:#dbe7cf;font-size:10px;padding:6px 10px}
#interaction-design .live-stage{text-align:center;padding:30px 30px 17px;min-height:455px;background:radial-gradient(ellipse at 50% 20%,#4c43504d,transparent 75%),#28242b}
#interaction-design .live-kicker{font-size:7px;letter-spacing:1.5px;color:#d2c1b6;margin-bottom:10px}
#interaction-design .live-stage>h3{font:34px Fredoka;color:#fff3dc;margin-bottom:23px}
#interaction-design .live-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
#interaction-design .live-choices>button{border:2px solid #b1978b;padding:0;border-radius:16px;overflow:hidden;background:#514650;color:#fff3dc;box-shadow:0 4px 0 #1a171c;transition:transform .18s}
#interaction-design .live-choices>button:hover{transform:translateY(-4px)}
#interaction-design .live-choices>button:focus-visible{outline:3px solid #fff3dc;outline-offset:4px}
#interaction-design .live-choices>button[aria-pressed=true]{border-color:#ffd49e;background:#ffd49e;color:#35232b;box-shadow:0 4px 0 #9b6655}
#interaction-design .cat-art{background:#e5cba3;position:relative}
#interaction-design .live-choices>button:nth-child(2) .cat-art{background:#e4c7bc}
#interaction-design .live-choices>button:nth-child(3) .cat-art{background:#bdd4c9}
#interaction-design .cat-art:before{content:'';position:absolute;inset:13%;border:1px solid #fff8;border-radius:50%}
#interaction-design .cat-art img{width:100%;height:175px;object-fit:contain;position:relative;z-index:1;transform:scale(1.22)}
#interaction-design .live-choices>button>span{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;font:18px Fredoka;border-top:1px solid #fff6}
#interaction-design .live-choices b{font:12px Nunito;visibility:hidden;border-radius:50%;background:#35232b;color:var(--gold);padding:1px 5px}
#interaction-design .live-choices>button[aria-pressed=true] b{visibility:visible}
#interaction-design .live-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:27px}
#interaction-design .game-btn.primary{background:#ffcab0;color:#35232b;border-color:#ffebd7;box-shadow:0 4px 0 #ac8174;font-size:18px;min-width:220px}
#interaction-design .game-btn.primary:hover{background:#ffdcc4}
#interaction-design .game-btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #ac8174}
#interaction-design .cancel{background:transparent;border:0;color:#e2cabe;text-decoration:underline;text-underline-offset:4px;font-size:10px;min-height:44px}
#interaction-design .live-status{font-size:10px;color:#d8cdbf;margin-top:19px}
#interaction-design .input-hint{display:flex;gap:25px;justify-content:center;padding:15px;font-size:8px;color:#c4cbbd;border-top:1px solid #42423f}
#interaction-design .input-hint span{display:flex;align-items:center;gap:7px}
#interaction-design kbd{font:9px Nunito;border:1px solid #7a8772;border-radius:3px;padding:2px 5px}
#interaction-design .inspector{border:1px solid #62715b;border-radius:9px;padding:23px;background:#344437}
#interaction-design .inspector .board-top{font-size:7px}
#interaction-design .inspector .board-top>span{color:#d4e9a8}
#interaction-design .inspector-row{border:1px solid #66785c;border-radius:5px;padding:14px;background:#293a2e}
#interaction-design .inspector-row>span{display:block;color:#bbd0aa;font-size:7px;letter-spacing:1px;margin-bottom:8px}
#interaction-design .inspector-row>b{font-size:12px}
#interaction-design .inspector-row code{font:12px/1.8 monospace;color:#e4d6bd}
#interaction-design .inspector-row code b{color:#e8ce93;font-weight:400}
#interaction-design .inspector-arrow{text-align:center;color:#a8bd95;font-size:19px;line-height:1.3}
#interaction-design .output-row>div{display:flex;align-items:center;gap:10px;font-size:11px}
#interaction-design .output-row i{width:17px;height:17px;background:var(--gold);border-radius:4px}
#interaction-design .output-row b{color:var(--gold)}
#interaction-design .inspector-caption{font-size:10px;color:#c3d0b8;margin-top:19px}
#interaction-design .live-stage #confirmed-view{position:relative;min-height:278px}
#interaction-design .live-stage #confirmed-cat{height:190px;margin:-15px auto 0}
#interaction-design .success-mark{position:absolute;top:145px;left:calc(50% + 45px);background:#d1e4b6;color:#31462f;border-radius:50%;width:30px;height:30px;font-size:20px}
#interaction-design .live-stage h4{font:22px Fredoka;margin:0 0 17px}
#interaction-design .live-stage #choose-again{margin:auto}
#interaction-design .responsive-board{background:#e4e9dd;border:1px solid #c9d5c0;border-radius:9px;padding:23px 35px 25px;min-height:570px}
#interaction-design .responsive-ruler{display:flex;justify-content:space-between;align-items:center;color:#5f7458;border-bottom:1px solid #becdb3;margin-bottom:23px;padding-bottom:10px;font-size:8px;letter-spacing:1px}
#interaction-design #device-frame{width:820px;max-width:100%;margin:auto;border:7px solid #363c35;border-radius:10px;background:#363c35;box-shadow:0 15px 25px #33452c26;transition:width .35s}
#interaction-design #device-frame[data-device=compact]{width:640px}
#interaction-design #device-frame[data-device=phone]{width:215px;border-radius:24px}
#interaction-design #device-frame img{width:100%;max-height:450px;object-fit:contain;border-radius:3px}
#interaction-design #device-frame[data-device=phone] img{border-radius:15px}
#interaction-design .responsive-notes{display:flex;justify-content:center;gap:45px;margin-top:24px}
#interaction-design .responsive-notes>div{display:flex;align-items:center;gap:10px;font-size:11px}
#interaction-design .responsive-notes .pin{width:23px;height:23px;font-size:12px}
#interaction-design .engineering-board{display:grid;grid-template-columns:1.2fr 1fr;gap:23px}
#interaction-design .architecture,#interaction-design .state-diagram{background:#fbfaf6;border:1px solid #cdcad7;border-radius:8px;padding:23px}
#interaction-design .arch-flow{display:flex;flex-direction:column;align-items:center;gap:7px}
#interaction-design .arch-node{background:#eeedf2;border:1px solid #cbc8d6;border-radius:7px;padding:16px;width:100%;text-align:center}
#interaction-design .arch-node>span{display:block;font-size:8px;letter-spacing:1px;color:#6f6880;margin-bottom:8px}
#interaction-design .arch-node strong{font:23px Fredoka;display:block;margin-bottom:6px}
#interaction-design .arch-node code{font:11px/1.7 monospace;color:#6b6379}
#interaction-design .arch-node small{font-size:9px;color:#6b6379}
#interaction-design .input-icons{display:flex;align-items:center;justify-content:center;gap:20px;height:35px}
#interaction-design .input-icons kbd{font-size:20px;padding:0 8px}
#interaction-design .input-icons b{font-size:25px;font-weight:400}
#interaction-design .arch-arrow{color:#9d91b1;font-size:20px;line-height:1}
#interaction-design .cascade{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:8px}
#interaction-design .cascade span{border:1px solid #cbc8d6;border-radius:4px;padding:5px 8px}
#interaction-design .cascade .cascade-strong{background:#ddd7e9}
#interaction-design .screen-nodes{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0 23px}
#interaction-design .screen-nodes button{background:#eeedf2;border:1px solid #c8c3d4;flex:1;border-radius:7px;padding:10px 8px;font-size:11px}
#interaction-design .screen-nodes button>span{display:block;font-size:27px;line-height:1.3;margin-bottom:6px}
#interaction-design .screen-nodes button[aria-pressed=true]{background:#665d76;color:#fff8eb;border-color:#665d76}
#interaction-design .screen-nodes>b{color:#998fa7;font-weight:400}
#interaction-design .hud-demo{position:relative;border:6px solid #363139;border-radius:8px;overflow:hidden;height:290px}
#interaction-design .hud-demo>img{width:100%;height:100%;object-fit:cover}
#interaction-design .hud-demo:not([data-screen=playing])>img{filter:brightness(.45)}
#interaction-design .mock-hud{position:absolute;top:12px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#fff3dc;gap:5px}
#interaction-design .mock-hud>span,#interaction-design .mock-hud>b{background:#302930dd;border:1px solid #a9988d;border-radius:5px;padding:5px 10px}
#interaction-design .mock-hud b{font-size:8px}
#interaction-design .mock-overlay{position:absolute;width:155px;top:50%;left:50%;transform:translate(-50%,-50%);background:#352f38ee;border:1px solid #a79987;border-radius:13px;color:#fff3dc;padding:22px;text-align:center}
#interaction-design .mock-overlay b{font:25px Fredoka}
#interaction-design .mock-overlay span{display:block;background:#ffcab0;color:#35232b;border-radius:7px;font:14px Fredoka;padding:9px;margin-top:16px}
#interaction-design .state-output{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10px;border:1px solid #cbc8d6;background:#ece8f2;border-radius:5px;padding:13px;margin-top:18px}
#interaction-design .state-output code{font-size:10px}
#interaction-design .finish{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-block:65px}
#interaction-design .finish-links a{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:14px}
#interaction-design .finish-links span{font-size:11px;color:var(--muted)}
#interaction-design .evidence-note{border-top:1px solid var(--line);padding-block:17px;font-size:11px;color:var(--muted)}
#interaction-design .evidence-note summary{cursor:pointer;font-weight:800}
#interaction-design .evidence-note p{margin-top:13px;max-width:900px}
#interaction-design footer{border-top:1px solid var(--line);padding-block:25px;display:flex;align-items:center;justify-content:space-between;gap:20px}
#interaction-design footer>span{font-size:8px;letter-spacing:1px}
#interaction-design footer>a:last-child{font-size:11px}
#interaction-design dialog{width:min(1200px,94vw);max-height:94vh;background:#f8f6ed;border:1px solid #c8cdbf;border-radius:10px;padding:18px;color:var(--ink)}
#interaction-design dialog::backdrop{background:#15241edb;backdrop-filter:blur(5px)}
#interaction-design .dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}
#interaction-design .dialog-top p{font-size:13px}
#interaction-design .dialog-top button{border:1px solid #afb9a6;background:#e8eddf;border-radius:4px;padding:9px 15px;white-space:nowrap}
#interaction-design dialog>img{max-height:78vh;max-width:100%;width:auto;margin:auto;object-fit:contain}
@media(max-width:1100px){#interaction-design .wrap{width:calc(100% - 48px)}
#interaction-design nav{gap:15px}
#interaction-design .brand span{display:none}
#interaction-design .hero-canvas{height:490px}
#interaction-design .hero-desktop{top:75px;left:4%;width:74%}
#interaction-design .hero-phone{right:4%;top:55px;width:19%}
#interaction-design .hero-cat{width:195px}
#interaction-design .hero-annotation{bottom:45px;left:8%}
#interaction-design .swatch-sticker{right:24%;bottom:22px}
#interaction-design .board-nav>a{padding:14px}
#interaction-design .board-nav strong{font-size:11px}
#interaction-design .prototype-layout{grid-template-columns:1fr 260px}
#interaction-design .live-stage{padding-inline:20px}
#interaction-design .cat-art img{height:145px}
#interaction-design .live-choices{gap:9px}
#interaction-design .live-actions{gap:8px;flex-wrap:wrap}
#interaction-design .game-btn.primary{min-width:185px;font-size:16px}
#interaction-design .design-board{gap:12px}
#interaction-design .design-board>div{padding:18px}
#interaction-design .big-aa{font-size:80px}
#interaction-design .big-aa span{font-size:10px}
#interaction-design .world-library{gap:9px}
#interaction-design .world-library b{font-size:15px;margin-inline:8px}
#interaction-design .world-library span{margin-inline:8px;font-size:6px}
#interaction-design .wireframes{gap:12px}
#interaction-design .wire-card{padding:14px}
#interaction-design .wire-content{padding-inline:0}
#interaction-design .wire-title{font-size:22px}
#interaction-design .journey-track{gap:17px}
#interaction-design .journey-track h3{font-size:18px}
#interaction-design .journey-track article:not(:last-child):after{right:-16px;font-size:17px}
#interaction-design .state-matrix{gap:20px}
#interaction-design .game-btn{font-size:18px}
#interaction-design .engineering-board{gap:15px}
#interaction-design .architecture,#interaction-design .state-diagram{padding:18px}}
@media(max-width:760px){#interaction-design .wrap{width:calc(100% - 32px)}
#interaction-design header{flex-wrap:wrap;padding-block:18px;gap:14px}
#interaction-design .brand span{display:inline;font-size:10px}
#interaction-design nav{order:3;width:100%;justify-content:space-between;gap:10px}
#interaction-design nav a{font-size:11px}
#interaction-design .back{font-size:10px}
#interaction-design .brand{font-size:21px}
#interaction-design .hero{padding-top:32px}
#interaction-design .hero-top{gap:20px;align-items:start;flex-direction:column;margin-bottom:24px}
#interaction-design h1{font-size:54px;letter-spacing:-2px}
#interaction-design .hero-aside{display:flex;width:100%;justify-content:space-between;align-items:center;gap:15px}
#interaction-design .hero-aside p{font-size:11px;margin:0}
#interaction-design .hero-aside a{font-size:10px}
#interaction-design .eyebrow{font-size:8px;letter-spacing:1.5px}
#interaction-design .hero-canvas{height:440px}
#interaction-design .canvas-note{font-size:7px;left:17px;top:17px}
#interaction-design .hero-desktop{width:87%;left:4%;top:48px;transform:rotate(-2deg);padding:6px}
#interaction-design .hero-phone{width:26%;right:4%;top:190px;border-width:4px;border-radius:17px}
#interaction-design .hero-cat{width:145px;right:22%;bottom:-22px}
#interaction-design .hero-annotation{left:5%;bottom:102px;padding:10px;gap:8px}
#interaction-design .hero-annotation:before{height:26px;left:23px}
#interaction-design .annotation b{font-size:10px}
#interaction-design .annotation small{font-size:8px}
#interaction-design .annotation .pin{width:23px;height:23px;font-size:12px}
#interaction-design .swatch-sticker{left:7%;right:auto;bottom:29px;width:128px;padding:9px}
#interaction-design .swatch-sticker>span{height:23px}
#interaction-design .swatch-sticker small{font-size:4px}
#interaction-design .canvas-corner{font-size:5px;left:auto;right:12px;bottom:10px}
#interaction-design .window-bar span{font-size:6px}
#interaction-design .window-bar{padding-bottom:6px}
#interaction-design .board-nav{grid-template-columns:repeat(2,1fr);gap:10px;padding-bottom:35px}
#interaction-design .board-nav>a{padding:15px}
#interaction-design .board-nav strong{font-size:12px}
#interaction-design .section{padding-block:43px}
#interaction-design .section-head{align-items:start;flex-direction:column;gap:22px;margin-bottom:25px}
#interaction-design h2{font-size:38px;letter-spacing:-1.4px}
#interaction-design .status{font-size:7px;padding:5px 8px;max-width:none}
#interaction-design .journey-board{padding:17px}
#interaction-design .board-top{font-size:7px;gap:12px}
#interaction-design .board-top>span{font-size:6px}
#interaction-design .journey-track{grid-template-columns:repeat(2,1fr);gap:24px 16px}
#interaction-design .journey-track article:not(:last-child):after{display:none}
#interaction-design .journey-number{font-size:21px;gap:8px}
#interaction-design .journey-number span{font-size:7px}
#interaction-design .journey-track h3{font-size:18px;margin:13px 0 8px}
#interaction-design .journey-chip{font-size:9px}
#interaction-design .journey-curve{padding-inline:0}
#interaction-design .journey-curve svg{height:70px}
#interaction-design .journey-curve>div{font-size:8px}
#interaction-design .journey-footer{flex-wrap:wrap;gap:10px;font-size:8px}
#interaction-design .journey-footer>span:last-child{width:100%}
#interaction-design .caption{font-size:9px}
#interaction-design .segmented button{padding:8px 13px;font-size:10px}
#interaction-design .wireframes{grid-template-columns:1fr;gap:18px}
#interaction-design .wire-card{padding:18px}
#interaction-design .wire-content{height:320px;max-width:320px;margin:auto;padding-inline:15px}
#interaction-design .wire-card .board-top{font-size:8px}
#interaction-design .wire-title{font-size:25px}
#interaction-design .finished{height:320px}
#interaction-design .wire-caption{font-size:12px}
#interaction-design .design-board{grid-template-columns:1fr 1fr;gap:12px}
#interaction-design .type-tile{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:5px 20px}
#interaction-design .type-tile .board-top{grid-column:1/-1}
#interaction-design .big-aa{font-size:80px;grid-row:2/4;flex-wrap:wrap}
#interaction-design .big-aa span{font-size:13px}
#interaction-design .type-tile h3{font-size:22px;margin-top:15px}
#interaction-design .type-bottom{margin-top:10px;padding-top:10px}
#interaction-design .type-bottom p{font-size:16px}
#interaction-design .palette-tile,#interaction-design .icon-tile{grid-column:1/-1}
#interaction-design .palette-bars{flex-direction:row}
#interaction-design .palette-bars>div{width:25%;height:120px;flex-direction:column;align-items:start;justify-content:space-between;padding:12px 8px;gap:10px}
#interaction-design .palette-bars b{font-size:10px;line-height:1.4}
#interaction-design .palette-bars span{font-size:7px}
#interaction-design .icon-grid{grid-template-columns:repeat(6,1fr);gap:10px;padding-top:12px}
#interaction-design .icon-grid img{width:30px;height:30px}
#interaction-design .icon-grid span{font-size:7px}
#interaction-design .state-matrix{grid-template-columns:repeat(2,1fr);gap:20px 15px;padding:5px 0 10px}
#interaction-design .game-btn{font-size:17px;padding:12px;min-height:52px}
#interaction-design .game-btn b{right:9px;font-size:10px}
#interaction-design .is-selected{padding-right:24px}
#interaction-design .state-matrix>div>span{font-size:8px}
#interaction-design .world-library{grid-template-columns:repeat(2,1fr);gap:12px}
#interaction-design .world-library>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
#interaction-design .world-library>div:last-child img{grid-row:1/3;aspect-ratio:1.3}
#interaction-design .world-library>div:last-child b{align-self:end}
#interaction-design .world-library>div:last-child span{align-self:start}
#interaction-design .world-library b{font-size:18px;margin:10px 10px 4px}
#interaction-design .world-library span{font-size:7px;margin:0 10px 10px}
#interaction-design .prototype-layout{grid-template-columns:1fr}
#interaction-design .live-stage{padding:25px 15px 18px;min-height:415px}
#interaction-design .live-stage>h3{font-size:29px}
#interaction-design .live-choices{gap:8px}
#interaction-design .cat-art img{height:130px}
#interaction-design .live-choices>button{border-radius:12px}
#interaction-design .live-choices>button>span{font-size:15px;padding:9px}
#interaction-design .live-choices b{font-size:9px;padding:0 4px}
#interaction-design .live-actions{margin-top:24px;gap:12px}
#interaction-design .game-btn.primary{min-width:180px}
#interaction-design .input-hint{gap:15px;font-size:7px;padding:12px 8px}
#interaction-design .inspector{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}
#interaction-design .inspector .board-top{grid-column:1/-1;padding-bottom:5px}
#interaction-design .inspector-arrow{display:none}
#interaction-design .inspector-row{padding:12px;min-width:0}
#interaction-design .inspector-row>b{font-size:10px}
#interaction-design .inspector-row code{font-size:10px}
#interaction-design .inspector-row>span{font-size:6px}
#interaction-design .output-row>div{font-size:9px;gap:6px;flex-wrap:wrap}
#interaction-design .inspector-caption{grid-column:1/-1;margin:0;font-size:9px}
#interaction-design .inspector-caption br{display:none}
#interaction-design .responsive-board{padding:18px 15px;min-height:0}
#interaction-design .responsive-ruler{font-size:6px}
#interaction-design .responsive-notes{gap:12px;flex-direction:column;margin-top:20px}
#interaction-design .responsive-notes>div{font-size:10px}
#interaction-design #device-frame{border-width:5px}
#interaction-design #device-frame[data-device=phone]{width:200px}
#interaction-design .engineering-board{grid-template-columns:1fr;gap:18px}
#interaction-design .arch-node{padding:13px}
#interaction-design .arch-node strong{font-size:22px}
#interaction-design .hud-demo{height:270px}
#interaction-design .finish{grid-template-columns:1fr;gap:28px;padding-block:43px}
#interaction-design .finish-links a{font-size:13px}
#interaction-design .finish-links span{font-size:10px}
#interaction-design footer{flex-wrap:wrap;gap:15px;padding-block:20px}
#interaction-design footer>span{order:3;width:100%;font-size:7px}
#interaction-design .evidence-note{font-size:10px}
#interaction-design dialog{padding:12px}
#interaction-design .dialog-top p{font-size:11px}
#interaction-design .dialog-top button{font-size:11px;padding:9px}}
@media(max-width:380px){#interaction-design .hero-canvas{height:390px}
#interaction-design .hero-phone{top:170px;width:27%}
#interaction-design .hero-cat{width:125px}
#interaction-design .hero-annotation{bottom:90px;left:4%}
#interaction-design .swatch-sticker{bottom:23px;width:110px}
#interaction-design .hero-aside p{font-size:10px}
#interaction-design .hero-aside a{font-size:9px}
#interaction-design h1{font-size:47px}
#interaction-design .brand span{font-size:8px}
#interaction-design .back{font-size:9px}
#interaction-design .cat-art img{height:105px}
#interaction-design .live-choices>button>span{font-size:13px;padding:8px 6px}
#interaction-design .live-actions{gap:5px}
#interaction-design .live-stage{padding-inline:10px}
#interaction-design .live-kicker{font-size:6px}
#interaction-design .game-btn.primary{min-width:170px}
#interaction-design .game-btn{font-size:15px}
#interaction-design .palette-bars>div{padding:10px 6px}
#interaction-design .palette-bars span{font-size:6px}
#interaction-design .big-aa{font-size:65px}
#interaction-design .type-tile h3{font-size:20px}
#interaction-design .type-bottom p{font-size:14px}
#interaction-design .journey-track h3{font-size:16px}
#interaction-design .journey-chip{font-size:8px}
#interaction-design .journey-number span{font-size:6px}
#interaction-design .journey-track{gap:18px 12px}
#interaction-design .journey-board{padding:13px}
#interaction-design .board-top>span{font-size:5px}
#interaction-design .state-output{font-size:9px}}
#interaction-design .board-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
#interaction-design .board-nav>a{min-width:0}
#interaction-design .swatch-sticker small{width:100%}
#interaction-design .wire-card:first-child .wire-point{top:32%}
#interaction-design .journey-curve>div b{text-align:center!important}
#interaction-design .downloads{padding-top:35px}
#interaction-design .downloads>div{display:flex;gap:9px;flex-wrap:wrap}
#interaction-design .downloads a{padding:10px 14px;border:1px solid var(--line);border-radius:5px;text-decoration:none;font-size:11px;min-height:44px;display:flex;align-items:center}
#interaction-design .downloads .download-all{background:var(--ink);color:var(--paper)}
@media(min-width:1101px){#interaction-design .hero-canvas{height:650px}
#interaction-design .hero-desktop{width:68%;top:50px}}
@media(min-width:761px) and (max-width:1100px){#interaction-design .hero-canvas{height:560px}}
@media(max-width:760px){#interaction-design .board-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
#interaction-design .mini-wire i,#interaction-design .mini-flow i,#interaction-design .mini-palette i{min-width:0;flex-shrink:1}
#interaction-design .mini-control{font-size:11px;flex-wrap:wrap}
#interaction-design .board-nav strong{overflow-wrap:break-word}}
@media(prefers-reduced-motion:reduce){#interaction-design{scroll-behavior:auto}
#interaction-design *,#interaction-design *::before,#interaction-design *::after{transition:none!important;animation:none!important}
#interaction-design .board-nav>a:hover,#interaction-design .live-choices>button:hover{transform:none}}

/* case-study.css */
#interaction-design .story-route{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-block:1px solid var(--line);padding-block:20px;font-size:11px}
#interaction-design .story-route a{text-decoration:none;font-weight:800}
#interaction-design .story-route>span{color:#93a18a}
#interaction-design .exploration-note{display:flex;gap:16px;padding-block:20px 35px;font-size:12px;color:var(--muted)}
#interaction-design .exploration-note b{color:var(--ink);white-space:nowrap}
#interaction-design .chapter:nth-of-type(even){background:#eef0e7}
#interaction-design .chapter-heading{display:flex;gap:25px;align-items:start;margin-bottom:30px}
#interaction-design .chapter-number{border:1px solid #afbea7;width:47px;height:47px;display:grid;place-items:center;border-radius:50%;font:22px Georgia;flex-shrink:0}
#interaction-design .chapter-heading .eyebrow{margin-bottom:12px}
#interaction-design .chapter-intro{font-size:14px;color:var(--muted);max-width:740px;margin-top:18px}
#interaction-design .option-panel{min-width:0}
#interaction-design .problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#interaction-design .problem-grid>article{border:1px solid #c9d2c0;background:#fffaf1;padding:22px;border-radius:8px;min-width:0}
#interaction-design .problem-grid h3{font:25px/1.2 Georgia;min-height:62px}
#interaction-design .problem-grid>article>p{font-size:12px;color:var(--muted);margin-top:20px}
#interaction-design .issue-example{background:#eeede4;border:1px solid #d9dbcd;padding:15px;border-radius:6px;margin-top:15px}
#interaction-design .issue-example>small{font-size:7px;letter-spacing:1px;display:block;margin-bottom:8px;color:#6c7765}
#interaction-design .issue-controls{display:flex;gap:5px;justify-content:center;align-items:center;min-height:44px}
#interaction-design .issue-controls span{font-size:9px;border-radius:5px;border:1px solid #a79b8a;padding:8px 6px;text-align:center}
#interaction-design .odd-selection{background:#b9cea6}
#interaction-design .odd-mode{background:#635d72;color:#fff6e6}
#interaction-design .odd-setting{background:#d9cfbb}
#interaction-design .issue-controls.consistent span{background:#ffd49e;color:#35232b;border-color:#bc946b}
#interaction-design .issue-arrow{text-align:center;color:#8a9780;font-size:23px;line-height:1.6}
#interaction-design .key-illustration{display:flex;align-items:center;justify-content:center;gap:15px;min-height:44px}
#interaction-design .key-illustration kbd{background:#fbfaf3;font-size:15px;padding:5px 12px}
#interaction-design .key-illustration>b{font:17px Fredoka;background:#514650;color:#fff3dc;padding:5px 15px;border-radius:5px}
#interaction-design .blocked-wire{color:#a54f49;font-size:25px}
#interaction-design .fixed-wire{color:#547e50;font-size:25px}
#interaction-design .hud-sketch{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:4px;background:#3d3540;color:#fff3dc;border-radius:5px;padding:5px}
#interaction-design .hud-sketch>span,#interaction-design .hud-sketch>b{font-size:9px}
#interaction-design .hud-sketch>b{white-space:nowrap}
#interaction-design .crowded>span:first-child{margin-right:-16px;transform:translateX(8px);background:#79535a}
#interaction-design .crowded>b{border:1px dashed #ff9d91;padding:2px 0}
#interaction-design .stacked>span{font-size:8px;line-height:1.3;background:#59505c;padding:4px 6px}
#interaction-design .decision-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:20px;padding:22px;background:#f9f7ee;border:1px solid var(--line);border-radius:6px}
#interaction-design .decision-strip b{font-size:8px;letter-spacing:1px}
#interaction-design .decision-strip p{font-size:12px;color:var(--muted);margin-top:7px}
#interaction-design .flow-board,#interaction-design .anatomy-board,#interaction-design .handoff-board,#interaction-design .debug-board,#interaction-design .performance-board,#interaction-design .motion-board{padding:26px;border:1px solid #c8d2c0;border-radius:8px;background:#f9f8ef}
#interaction-design .flow-board{background:#e4ecdc}
#interaction-design .flow-root{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #92a786;background:#fff8e9;border-radius:6px;padding:16px;width:220px;max-width:100%;margin:15px auto 0;font:22px Fredoka}
#interaction-design .flow-root img{width:25px;height:25px}
#interaction-design .flow-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;position:relative;margin:0 35px}
#interaction-design .flow-branch{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;border-top:1px solid #9db58b;margin-top:22px}
#interaction-design .flow-branch>span{color:#799669;font-size:20px;line-height:1}
#interaction-design .flow-node{display:block;background:#f8f9ef;border:1px solid #b2c2a6;border-radius:5px;padding:12px 15px;text-align:center;width:100%;font-size:12px}
#interaction-design .flow-destination{background:#3f6345;color:#fff7e7;border-color:#3f6345}
#interaction-design .flow-cat-previews{display:flex;justify-content:center;height:86px;background:#efe0c6;border-radius:6px;width:100%;overflow:hidden}
#interaction-design .flow-cat-previews img{width:33%;height:100%;object-fit:contain;transform:scale(1.2)}
#interaction-design .flow-mode{display:flex;gap:6px;width:100%;padding:12px 4px;justify-content:center;font-size:10px}
#interaction-design .flow-mode span{border:1px solid #b3c0a5;padding:7px;background:#fff4db;border-radius:4px}
#interaction-design .flow-side-route{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-size:10px;margin-top:25px;padding-top:18px;border-top:1px solid #becdb2}
#interaction-design .layout-alternatives{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:23px}
#interaction-design .layout-alternatives article{padding:22px;border:1px solid #c5cdbd;border-radius:7px;background:#faf8f0}
#interaction-design .mini-layout{height:190px;border:1px solid #a6aea2;border-radius:6px;background:#e5e7e0;max-width:380px;margin:auto;padding:22px;color:#5c675b}
#interaction-design .action-first{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}
#interaction-design .action-first>div{font:25px Fredoka}
#interaction-design .action-first>b{border:2px solid #7c8974;border-radius:5px;background:#ccd5c5;width:80%;text-align:center;padding:9px}
#interaction-design .action-first>span{font-size:10px}
#interaction-design .companion-first{display:flex;align-items:center;gap:15px}
#interaction-design .companion-first>img{width:46%;height:165px;object-fit:contain}
#interaction-design .companion-first>div{display:flex;flex-direction:column;flex:1;gap:15px}
#interaction-design .companion-first b{font:24px Fredoka}
#interaction-design .companion-first span{font-size:10px}
#interaction-design .companion-first strong{background:#ccd5c5;border:2px solid #7c8974;border-radius:5px;padding:8px;text-align:center;font-size:13px}
#interaction-design .layout-alternatives h3{font:21px Georgia;margin:17px 0 8px}
#interaction-design .layout-alternatives p:not(.eyebrow){font-size:12px;color:var(--muted)}
#interaction-design .final-screen-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
#interaction-design .final-screen-grid article{border:1px solid var(--line);padding:12px;background:#fdfaf2;border-radius:8px;min-width:0}
#interaction-design .final-screen-grid article:nth-child(2){grid-column:1}
#interaction-design .final-screen-grid .phone-screen{grid-column:2;grid-row:1/3;align-self:start}
#interaction-design .final-screen-grid img{max-height:380px;object-fit:contain;background:#302c33}
#interaction-design .final-screen-grid .phone-screen img{max-height:none}
#interaction-design .screen-annotation{padding:13px 5px 5px;font-size:12px;color:var(--muted)}
#interaction-design .anatomy-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:35px;align-items:center}
#interaction-design .measured-component{padding:25px 10px}
#interaction-design .dimension{font-size:10px;line-height:1.3;color:#778c67;text-align:center;padding:12px}
#interaction-design .component-row{display:flex;align-items:center;gap:12px}
#interaction-design .measured-button{border:2px solid #b8a399;border-radius:16px;background:#514650;color:#fff3dc;box-shadow:0 3px 0 #201b22;min-height:68px;flex:1;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font:24px Fredoka;gap:15px}
#interaction-design .measured-button img{width:25px;height:25px}
#interaction-design .measured-button i{width:25px}
#interaction-design .measure-callouts{display:flex;gap:10px;justify-content:center;padding-top:20px;font-size:9px;color:#647959}
#interaction-design .measure-callouts span{border-top:1px dashed #91a383;padding-top:9px}
#interaction-design .spacing-scale{display:flex;align-items:end;justify-content:center;gap:26px;padding:25px 0 10px}
#interaction-design .spacing-scale>span{text-align:center;font-size:9px}
#interaction-design .spacing-scale i{height:var(--space);width:30px;display:block;background:#b6c7a7;border:1px solid #92a681;margin-bottom:7px}
#interaction-design .anatomy-rules>div{padding:17px 0;border-bottom:1px solid #d4dccb}
#interaction-design .anatomy-rules b,#interaction-design .anatomy-rules span{display:block}
#interaction-design .anatomy-rules b{font-size:13px}
#interaction-design .anatomy-rules span{font-size:11px;color:var(--muted);margin-top:3px}
#interaction-design .embedded-prototype{padding:20px;border-radius:8px}
#interaction-design .tool-label{display:block;font-size:8px;font-weight:800;letter-spacing:1px;margin-bottom:18px}
#interaction-design .handoff-flow{display:grid;grid-template-columns:250px 30px 1fr;gap:20px;align-items:center}
#interaction-design .handoff-spec{padding:20px;background:#eee8f1;border:1px solid #c9bbd2;border-radius:8px}
#interaction-design .figma-component{border:1px solid #8d70ac;padding:16px 5px;position:relative;margin-block:24px}
#interaction-design .figma-component:before,#interaction-design .figma-component:after{content:'';position:absolute;width:7px;height:7px;background:#fff;border:1px solid #8d70ac}
#interaction-design .figma-component:before{left:-4px;top:-4px}
#interaction-design .figma-component:after{right:-4px;bottom:-4px}
#interaction-design .variant-tags{display:flex;flex-wrap:wrap;gap:6px}
#interaction-design .variant-tags>span{border:1px solid #c7bad0;border-radius:4px;padding:5px 8px;font-size:9px;background:#faf6fc}
#interaction-design .spec-assets{display:flex;align-items:center;gap:10px;margin-top:25px;font-size:9px}
#interaction-design .spec-assets img{width:25px}
#interaction-design .spec-assets>b{font:25px Fredoka}
#interaction-design .handoff-arrow{font-size:30px;color:#9aaa8b}
#interaction-design .engine-trees{display:grid;grid-template-columns:1fr 1fr;gap:15px}
#interaction-design .engine-trees>div{border:1px solid #b9c8ad;border-radius:7px;background:#e7eddf;padding:18px;min-width:0}
#interaction-design .engine-trees pre{font:11px/1.9 monospace;overflow-wrap:anywhere;white-space:pre-wrap;margin:0}
#interaction-design .engine-trees p{font-size:10px;color:var(--muted);margin-top:14px}
#interaction-design .handoff-checks{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:13px;padding-top:25px;margin-top:20px;border-top:1px solid #ccd7c2;font-size:10px}
#interaction-design .handoff-checks>span{border:1px solid #b9c8ad;background:#f4f6eb;border-radius:5px;padding:9px}
#interaction-design .motion-board{margin-top:20px}
#interaction-design .motion-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
#interaction-design .motion-demo{display:flex;align-items:center;flex-direction:column;gap:22px;padding:10px}
#interaction-design .small-button{border:1px solid #b3c0a6;border-radius:5px;background:#edf1e4;padding:9px 13px;font-size:10px;min-height:40px}
#interaction-design .motion-timeline>div{display:grid;grid-template-columns:100px 1fr 75px;gap:15px;align-items:center;margin-block:15px;font-size:10px}
#interaction-design .motion-timeline span{height:15px;border:1px solid #a4b895;background:repeating-linear-gradient(90deg,#d5e1ca 0 20%,#a7bc9610 20% 21%);border-radius:3px;position:relative}
#interaction-design .motion-timeline span:before,#interaction-design .motion-timeline span:after{content:'';position:absolute;top:3px;width:7px;height:7px;background:#6b8a57;transform:rotate(45deg)}
#interaction-design .motion-timeline span:before{left:3px}
#interaction-design .motion-timeline span:after{right:3px}
#interaction-design .motion-timeline small{font-size:9px}
#interaction-design .motion-demo .game-btn{min-width:220px;transition:background-color .18s,box-shadow .18s,transform .18s}
#interaction-design .motion-demo .game-btn:hover{background:#675761}
#interaction-design .motion-demo .game-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #1c1820}
#interaction-design .motion-selected{background:#ffd49e!important;color:#35232b}
#interaction-design .debug-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#interaction-design .debug-flow>div{border:1px solid #c4ceb9;border-radius:6px;background:#eaf0e0;padding:20px;text-align:center}
#interaction-design .debug-flow>div>span{display:block;font-size:8px;letter-spacing:1px;margin-bottom:20px}
#interaction-design .debug-flow strong{font:20px Fredoka;display:block}
#interaction-design .debug-flow code{font-size:11px;display:block}
#interaction-design .debug-flow kbd{font-size:18px;background:#fffcf1;padding:6px 10px}
#interaction-design .debug-flow b{margin:0 8px;font-size:20px;font-weight:400}
#interaction-design .debug-flow p{font-size:11px;color:var(--muted);margin-top:18px}
#interaction-design .source-excerpt{padding:20px;background:#2e3b31;color:#e7d9bb;border-radius:6px;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.8 monospace;margin:20px 0}
#interaction-design .source-excerpt>span{display:block;color:#b7c9a3;font:8px Nunito;letter-spacing:1px;margin-bottom:14px}
#interaction-design .debug-demo{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px;background:#eef1e5;border:1px solid #c3d1b6;border-radius:6px}
#interaction-design .debug-demo .eyebrow{font-size:7px}
#interaction-design .debug-pause{width:70px;height:70px;background:#514650;color:#fff3dc;border:2px solid #b8a399;border-radius:15px;font:28px Fredoka;flex-shrink:0}
#interaction-design .debug-pause[aria-pressed=true]{background:#ffd49e;color:#35232b}
#interaction-design #debug-output{font-size:12px;min-width:140px}
#interaction-design #debug-output b,#interaction-design #debug-output span{display:block}
#interaction-design #debug-output span{font-size:10px;color:var(--muted);max-width:200px;margin-top:5px}
#interaction-design .profile-route{display:flex;align-items:center;gap:15px;margin:15px 0 30px}
#interaction-design .profile-route>div{flex:1;background:#e7eddf;border:1px solid #b9c8ad;border-radius:6px;padding:20px;min-width:0}
#interaction-design .profile-route>div>span{font:25px Georgia;color:#8ba178;display:block;margin-bottom:18px}
#interaction-design .profile-route strong{font:21px Fredoka;display:block}
#interaction-design .profile-route small{font-size:11px;display:block;margin-top:9px;color:var(--muted)}
#interaction-design .profile-route>b{font-size:20px;font-weight:400}
#interaction-design .profile-lanes>div{display:grid;grid-template-columns:180px 1fr;gap:25px;padding:15px;border-top:1px solid #d5dfcc;font-size:12px}
#interaction-design .profile-lanes span{background:repeating-linear-gradient(135deg,#e1e8d8 0 6px,#eaf0e2 6px 12px);padding:10px 15px;font-size:11px;color:#526a47;border-radius:4px}
#interaction-design .metric-empty{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px}
#interaction-design .metric-empty>div{padding:20px;border:1px dashed #b8c6ac;border-radius:6px}
#interaction-design .metric-empty b,#interaction-design .metric-empty span{display:block;font-size:13px}
#interaction-design .metric-empty span{font-size:11px;color:#728467;margin-top:9px}
#interaction-design .result-grid{display:grid;grid-template-columns:1fr 240px;gap:30px;align-items:center;background:#dfe8d6;padding:25px;border:1px solid #bfcfb3;border-radius:9px}
#interaction-design .result-video video{display:block;width:100%;max-height:480px;background:#302c33;border-radius:6px}
#interaction-design .result-video>p{font-size:10px;color:var(--muted);margin-top:12px}
#interaction-design .result-phone{border:6px solid #38393a;border-radius:23px;overflow:hidden;background:#302c33;max-width:220px;margin:auto}
#interaction-design .result-phone img{max-height:445px;object-fit:contain}
#interaction-design .result-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block:22px}
#interaction-design .result-proof>div{border-bottom:1px solid #c5d2ba;padding:18px 0}
#interaction-design .result-proof b,#interaction-design .result-proof span{display:block}
#interaction-design .result-proof b{font-size:17px}
#interaction-design .result-proof span{font-size:11px;color:var(--muted);margin-top:7px}
#interaction-design .review-outcome{display:grid;grid-template-columns:180px 1fr auto;gap:25px;align-items:center;padding:20px;border:1px solid #c5d2ba;border-radius:6px;background:#f6f8ee}
#interaction-design .review-outcome b{font-size:14px}
#interaction-design .review-outcome p{font-size:12px;color:var(--muted)}
#interaction-design .review-outcome a{font-size:10px}
#interaction-design .next-evidence{border:1px solid #c5d2ba;border-radius:6px;padding:16px 20px;margin-top:18px;font-size:12px}
#interaction-design .next-evidence p{font-size:12px;color:var(--muted);margin-top:13px}
#interaction-design .chapter .embedded-prototype .inspector{min-width:0}
#interaction-design .chapter .prototype-layout{grid-template-columns:minmax(0,1fr) 280px}
#interaction-design .chapter .live-actions{flex-wrap:wrap}
#interaction-design .chapter-jumps{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
#interaction-design .chapter-jumps a{padding:9px 14px;border:1px solid var(--line);border-radius:5px;font-size:11px;text-decoration:none;min-height:42px;display:flex;align-items:center;gap:15px}
#interaction-design .chapter-jumps a>span{color:#7a8e6f}
#interaction-design .option-panel+.option-panel{margin-top:48px;padding-top:30px;border-top:0}
#interaction-design .example-heading{display:flex;align-items:center;gap:15px;margin-bottom:20px}
#interaction-design .example-heading>span{font:21px Georgia;color:#7a8e6f}
#interaction-design .example-heading h3{font:27px Fredoka}
#interaction-design .example-heading p{font-size:11px;color:var(--muted);margin-top:3px}
#interaction-design #wire-art{grid-template-columns:1fr;gap:20px}
#interaction-design #wire-art .wire-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px}
#interaction-design #wire-art .board-top,#interaction-design #wire-art .wire-caption{grid-column:1/-1}
#interaction-design #wire-art .wire-content{display:flex;height:340px;width:100%;max-width:440px;padding-top:30px;grid-column:1;grid-row:2;margin:auto}
#interaction-design #wire-art .finished{display:block;height:340px;position:relative;padding-top:26px;grid-column:2;grid-row:2;border-radius:5px;overflow:hidden}
#interaction-design .wire-pair-label{position:absolute;top:6px;left:12px;font:800 8px Nunito;letter-spacing:1px;color:#6c7180}
#interaction-design #wire-art .finished .wire-pair-label{color:#eee7da}
#interaction-design .responsive-all{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:22px;border:1px solid #c8d2c0;background:#e4e9dd;border-radius:8px}
#interaction-design .responsive-all figure{min-width:0;margin:0;padding:14px;border:1px solid #bbc9b1;border-radius:6px;background:#f9f8f0}
#interaction-design .responsive-all figcaption{margin-bottom:14px}
#interaction-design .responsive-all figcaption b,#interaction-design .responsive-all figcaption span{display:block}
#interaction-design .responsive-all figcaption b{font-size:16px}
#interaction-design .responsive-all figcaption span{font-size:8px;color:var(--muted);margin-top:3px}
#interaction-design .responsive-all .zoom{height:340px;background:#343239}
#interaction-design .responsive-all img{height:100%;object-fit:contain}
#interaction-design .responsive-all figure>p{font-size:11px;color:var(--muted);margin-top:14px}
#interaction-design .next-evidence h3,#interaction-design .evidence-note h3{font-size:13px;font-weight:800}
@media(max-width:1100px){#interaction-design .problem-grid{gap:12px}
#interaction-design .problem-grid>article{padding:16px}
#interaction-design .problem-grid h3{font-size:23px}
#interaction-design .issue-example{padding:10px}
#interaction-design .issue-controls span{font-size:8px;padding:7px 4px}
#interaction-design .handoff-flow{grid-template-columns:210px 20px 1fr;gap:12px}
#interaction-design .engine-trees{grid-template-columns:1fr}
#interaction-design .final-screen-grid{grid-template-columns:minmax(0,1fr) 225px}
#interaction-design .chapter .prototype-layout{grid-template-columns:minmax(0,1fr) 230px}
#interaction-design .measured-button{font-size:21px;padding-inline:12px}
#interaction-design .motion-timeline>div{grid-template-columns:80px 1fr 65px;gap:10px}
#interaction-design .profile-route{gap:10px}
#interaction-design .profile-route>div{padding:15px}
#interaction-design .review-outcome{grid-template-columns:150px 1fr}
#interaction-design .review-outcome a{grid-column:1/-1}
#interaction-design .chapter-options>button{padding:15px}
#interaction-design .chapter-options b{font-size:14px}}
@media(max-width:760px){#interaction-design header nav{flex-wrap:wrap;gap:12px}
#interaction-design header nav a{font-size:10px}
#interaction-design .story-route{justify-content:flex-start;font-size:9px;gap:10px;padding-block:15px}
#interaction-design .exploration-note{flex-direction:column;gap:5px;font-size:11px;padding-bottom:25px}
#interaction-design .chapter-heading{gap:15px;flex-direction:column}
#interaction-design .chapter-number{width:36px;height:36px;font-size:18px}
#interaction-design .chapter-heading h2{font-size:35px}
#interaction-design .chapter-intro{font-size:12px}
#interaction-design .chapter-options{gap:7px}
#interaction-design .chapter-options>button{padding:12px 9px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
#interaction-design .chapter-options b{font-size:12px;line-height:1.3}
#interaction-design .chapter-options small{font-size:8px;line-height:1.4}
#interaction-design .chapter-options>button>span{font-size:13px;align-self:start}
#interaction-design .problem-grid{grid-template-columns:1fr;gap:15px}
#interaction-design .problem-grid h3{min-height:0;font-size:25px}
#interaction-design .problem-grid>article{padding:20px}
#interaction-design .issue-controls span{font-size:10px;padding:9px}
#interaction-design .issue-example{padding:15px}
#interaction-design .hud-sketch{max-width:300px;margin:auto;min-height:50px}
#interaction-design .hud-sketch b{font-size:11px}
#interaction-design .hud-sketch span{font-size:10px}
#interaction-design .decision-strip{grid-template-columns:1fr;gap:15px;padding:18px}
#interaction-design .decision-strip p{font-size:11px}
#interaction-design .flow-board,#interaction-design .anatomy-board,#interaction-design .handoff-board,#interaction-design .debug-board,#interaction-design .performance-board,#interaction-design .motion-board{padding:17px}
#interaction-design .flow-branches{gap:12px;margin-inline:0}
#interaction-design .flow-node{font-size:9px;padding:10px 6px}
#interaction-design .flow-root{font-size:21px;width:180px}
#interaction-design .flow-cat-previews{height:55px}
#interaction-design .flow-mode{flex-direction:column;gap:5px;font-size:8px;padding:2px 0}
#interaction-design .flow-mode span{text-align:center;padding:6px 3px}
#interaction-design .flow-side-route{gap:10px;font-size:8px}
#interaction-design .layout-alternatives{grid-template-columns:1fr}
#interaction-design .mini-layout{height:180px}
#interaction-design .final-screen-grid{grid-template-columns:1fr}
#interaction-design .final-screen-grid .phone-screen{grid-column:1;grid-row:auto;max-width:275px;margin:auto}
#interaction-design .final-screen-grid article:nth-child(2){grid-column:1}
#interaction-design .screen-annotation{font-size:11px}
#interaction-design .anatomy-layout{grid-template-columns:1fr;gap:15px}
#interaction-design .measured-component{padding:10px 0}
#interaction-design .measured-button{font-size:21px;padding:12px;gap:8px}
#interaction-design .measured-button img,#interaction-design .measured-button i{width:20px}
#interaction-design .component-row{gap:5px}
#interaction-design .component-row>.dimension{font-size:8px;padding:4px}
#interaction-design .measure-callouts{font-size:8px;gap:9px}
#interaction-design .spacing-scale{gap:20px}
#interaction-design .embedded-prototype{padding:0;background:none}
#interaction-design .chapter .prototype-layout{grid-template-columns:1fr}
#interaction-design .handoff-flow{grid-template-columns:1fr;gap:15px}
#interaction-design .handoff-arrow{text-align:center;transform:rotate(90deg)}
#interaction-design .handoff-spec{max-width:350px;width:100%;margin:auto}
#interaction-design .engine-trees{grid-template-columns:1fr}
#interaction-design .engine-trees pre{font-size:12px}
#interaction-design .handoff-checks{font-size:9px;gap:8px}
#interaction-design .handoff-checks>span{padding:7px}
#interaction-design .motion-layout{grid-template-columns:1fr;gap:20px}
#interaction-design .motion-timeline>div{grid-template-columns:85px 1fr 70px;gap:10px;font-size:9px}
#interaction-design .debug-flow{grid-template-columns:1fr;gap:15px}
#interaction-design .debug-flow>div{padding:18px}
#interaction-design .debug-flow>div>span{margin-bottom:15px}
#interaction-design .debug-flow p{font-size:11px}
#interaction-design .debug-demo{flex-wrap:wrap;justify-content:flex-start;gap:20px;padding:17px}
#interaction-design .debug-demo>div:first-child{width:100%}
#interaction-design .debug-pause{width:62px;height:62px}
#interaction-design .source-excerpt{font-size:10px;padding:15px}
#interaction-design .profile-route{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#interaction-design .profile-route>b{display:none}
#interaction-design .profile-route>div{padding:15px}
#interaction-design .profile-route strong{font-size:20px}
#interaction-design .profile-route small{font-size:10px}
#interaction-design .profile-lanes>div{grid-template-columns:1fr;gap:8px;padding-inline:0;font-size:11px}
#interaction-design .profile-lanes span{font-size:10px}
#interaction-design .metric-empty{grid-template-columns:1fr;gap:10px}
#interaction-design .metric-empty>div{padding:13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
#interaction-design .metric-empty b{font-size:11px}
#interaction-design .metric-empty span{font-size:10px;margin:0}
#interaction-design .result-grid{grid-template-columns:1fr;padding:17px;gap:25px}
#interaction-design .result-phone{max-width:200px}
#interaction-design .result-proof{grid-template-columns:1fr;gap:0}
#interaction-design .result-proof b{font-size:16px}
#interaction-design .review-outcome{grid-template-columns:1fr;gap:12px;padding:17px}
#interaction-design .review-outcome p{font-size:11px}
#interaction-design footer>span{font-size:6px}
#interaction-design .anatomy-rules span{font-size:10px}
#interaction-design .next-evidence{font-size:11px;padding:14px}
#interaction-design .next-evidence p{font-size:11px}}
@media(max-width:380px){#interaction-design .chapter-heading h2{font-size:31px}
#interaction-design .chapter-options>button{padding:10px 7px}
#interaction-design .chapter-options b{font-size:11px}
#interaction-design .chapter-options small{font-size:7px}
#interaction-design .flow-node{font-size:8px}
#interaction-design .flow-cat-previews{height:45px}
#interaction-design .measured-button{font-size:19px}
#interaction-design .measured-button img,#interaction-design .measured-button i{width:15px}
#interaction-design .motion-timeline>div{grid-template-columns:75px 1fr 62px;gap:7px}
#interaction-design .motion-timeline small{font-size:8px}
#interaction-design .debug-demo{gap:12px}
#interaction-design #debug-output{min-width:0;flex:1}
#interaction-design .chapter .inspector-row code{font-size:9px}}
@media(max-width:760px){#interaction-design .chapter-jumps{order:initial;justify-content:flex-start;gap:8px}
#interaction-design .chapter-jumps a{font-size:10px;padding:8px 10px}
#interaction-design .example-heading h3{font-size:23px}
#interaction-design .example-heading p{font-size:10px}
#interaction-design .option-panel+.option-panel{margin-top:35px;padding-top:25px}
#interaction-design #wire-art .wire-card{grid-template-columns:1fr;gap:14px}
#interaction-design #wire-art .wire-content{grid-column:1;grid-row:2;height:320px;max-width:320px}
#interaction-design #wire-art .finished{grid-column:1;grid-row:3;height:270px}
#interaction-design .responsive-all{grid-template-columns:1fr;padding:15px;gap:18px}
#interaction-design .responsive-all .zoom{height:auto;min-height:180px;max-height:500px}
#interaction-design .responsive-all img{height:auto;max-height:500px;width:100%;object-fit:contain}
#interaction-design .responsive-all figure>p{font-size:11px}}

/* ui-exploration.css */
#interaction-design .explore-kicker{font-size:8px;letter-spacing:1px;font-weight:900;margin-bottom:12px}
#interaction-design .explore-description{font-size:12px;color:var(--muted);margin:0 0 20px}
#interaction-design .inspect-surface{position:relative}
#interaction-design .final-screen-grid .inspect-surface img{max-height:none;height:auto;object-fit:initial}
#interaction-design .inspect-region{position:absolute;border:1px solid #ffd49e99;border-radius:5px;background:transparent;padding:0;cursor:crosshair;z-index:1}
#interaction-design .inspect-region>span{position:absolute;left:-9px;top:-9px;width:22px;height:22px;border:1px solid #35232b;border-radius:50%;background:#ffd49e;color:#35232b;font:12px Nunito;display:grid;place-items:center}
#interaction-design .inspect-region.inspected{border:3px solid #ffd49e;background:#ffd49e16;box-shadow:0 0 0 2px #35232b99}
#interaction-design .inspect-region:focus-visible{outline:3px solid #fff3dc;outline-offset:3px}
#interaction-design .inspect-notes{padding:15px 3px 3px}
#interaction-design .inspect-note{display:flex;align-items:start;gap:12px;width:100%;border:1px solid #d5dccf;background:#faf8f0;padding:12px;border-radius:5px;text-align:left;margin-top:8px}
#interaction-design .inspect-note>span{display:grid;place-items:center;width:23px;height:23px;flex-shrink:0;border-radius:50%;background:#e4e9d9;font-size:11px}
#interaction-design .inspect-note b{font-size:12px}
#interaction-design .inspect-note p{font-size:11px;color:var(--muted);margin-top:3px}
#interaction-design .inspect-note.inspected{border-color:#8ca478;background:#eaf0df}
#interaction-design .state-rig,#interaction-design .viewport-lab,#interaction-design .ui-event-timeline{border:1px solid #c4d1b8;background:#f4f6eb;border-radius:8px;padding:25px;margin-top:24px}
#interaction-design .state-rig{grid-column:1/-1}
#interaction-design .design-board>.state-rig{background:#eef2e5}
#interaction-design .state-switches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
#interaction-design .state-switches label{display:flex;align-items:center;gap:8px;border:1px solid #b3c4a3;background:#faf9f1;padding:9px 13px;border-radius:5px;font-size:12px;cursor:pointer;min-height:44px}
#interaction-design .state-switches input,#interaction-design .viewport-controls input[type=checkbox],#interaction-design .viewport-preferences input{accent-color:#527040;width:16px;height:16px;flex-shrink:0}
#interaction-design .state-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;background:#302b32;border-radius:7px;padding:22px}
#interaction-design .state-samples>div{min-width:0}
#interaction-design .state-samples small{display:block;font-size:8px;letter-spacing:1px;color:#dacfc2;margin-bottom:12px}
#interaction-design .rig-control{width:100%;min-height:76px;position:relative;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 36px 12px 16px;background:#514650;color:#fff3dc;border:2px solid #b8a399;border-radius:14px;box-shadow:0 4px 0 #17151b;font:22px Fredoka;transition:background-color .18s,transform .18s,box-shadow .18s}
#interaction-design .rig-control img{width:40px;height:45px;object-fit:contain;flex-shrink:0}
#interaction-design .rig-control span{overflow-wrap:anywhere;min-width:0}
#interaction-design .rig-control i{visibility:hidden;position:absolute;right:10px;font:900 12px Nunito;border-radius:50%;padding:0 4px;background:#35232b;color:#ffd49e;font-style:normal}
#interaction-design .rig-control:hover,#interaction-design .rig-control.force-hover{background:#695863;border-color:#fff3dc}
#interaction-design .rig-control.force-selected{background:#ffd49e;color:#35232b;border-color:#ffd49e;box-shadow:0 4px 0 #9b6655,inset 0 0 0 2px #fff0d3}
#interaction-design .rig-control.force-selected i{visibility:visible}
#interaction-design .rig-control.force-selected:hover,#interaction-design .rig-control.force-selected.force-hover{background:#ffdfb7}
#interaction-design .rig-control:focus-visible,#interaction-design .rig-control.force-focus{outline:3px solid #fff3dc;outline-offset:-6px}
#interaction-design .rig-control.force-selected:focus-visible,#interaction-design .rig-control.force-selected.force-focus{outline-color:#35232b}
#interaction-design .rig-control:active,#interaction-design .rig-control.force-pressed{transform:translateY(2px);box-shadow:0 1px 0 #17151b}
#interaction-design .rig-control.force-selected:active,#interaction-design .rig-control.force-selected.force-pressed{box-shadow:0 1px 0 #9b6655,inset 0 0 0 2px #fff0d3}
#interaction-design .rig-control:disabled{background:#514650!important;color:#b4a9ab!important;border-color:#7b6d74!important;outline:none!important;box-shadow:none!important;transform:none!important;cursor:not-allowed;opacity:.75}
#interaction-design .rig-control:disabled i{visibility:hidden}
#interaction-design .state-readout{display:flex;align-items:start;justify-content:space-between;gap:20px;padding-top:18px;font-size:11px;color:#506744}
#interaction-design .state-readout p{max-width:65%}
#interaction-design .state-readout span{text-align:right}
#interaction-design .rig-key{display:flex;gap:16px;flex-wrap:wrap;font-size:10px;color:#63745a;margin:15px 0}
#interaction-design .viewport-controls{display:flex;align-items:center;gap:25px;margin-bottom:20px}
#interaction-design .viewport-controls>label:first-child{flex:1;min-width:0;font-size:12px;font-weight:800}
#interaction-design .viewport-controls output{float:right;font:11px monospace;color:#557446}
#interaction-design .viewport-controls input[type=range]{width:100%;display:block;height:30px;accent-color:#5b7b48;margin:7px 0 0}
#interaction-design .viewport-controls>label:nth-child(2){display:flex;align-items:center;gap:8px;font-size:11px}
#interaction-design .viewport-controls input:focus-visible,#interaction-design .state-switches input:focus-visible,#interaction-design .viewport-preferences input:focus-visible{outline:3px solid #a6753f;outline-offset:3px}
#interaction-design .viewport-stage{position:relative;width:100%;overflow:hidden;background:#d7e1cc;border:0;border-radius:7px;min-height:150px}
#interaction-design .viewport-device{position:absolute;top:0;left:0;transform-origin:top left;container-type:inline-size;color:#fff3dc;background:#302b32}
#interaction-design .viewport-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:32px}
#interaction-design .viewport-main{min-width:0}
#interaction-design .viewport-eyebrow{font-size:10px;letter-spacing:1px;color:#d5b9a3}
#interaction-design .viewport-main h3{font:32px Fredoka;margin:10px 0 8px}
#interaction-design .viewport-main>p:not(.viewport-eyebrow){font-size:13px;color:#d6c5b9;margin-bottom:22px}
#interaction-design .viewport-primary,#interaction-design .viewport-secondary{display:block;width:100%;font:21px/1.3 Fredoka;padding:14px 20px;border:2px solid #b8a399;min-height:64px;border-radius:16px;background:#514650;color:#fff3dc;margin-top:12px;box-shadow:0 3px 0 #17151b;overflow-wrap:anywhere}
#interaction-design .viewport-primary{background:#ffcab0;color:#35232b;border-color:#ffebd7;box-shadow:0 3px 0 #ac8174}
#interaction-design .viewport-primary:hover{background:#ffddc5}
#interaction-design .viewport-secondary:hover{background:#675863}
#interaction-design .viewport-primary:focus-visible,#interaction-design .viewport-secondary:focus-visible{outline:3px solid #fff3dc;outline-offset:3px}
#interaction-design .viewport-primary:active,#interaction-design .viewport-secondary:active{transform:translateY(2px);box-shadow:0 1px 0 #ac8174}
#interaction-design .viewport-preferences{min-width:0;border-left:1px solid #72636d;padding-left:25px}
#interaction-design .viewport-preferences h4{font:24px Fredoka;margin-top:4px}
#interaction-design .viewport-preferences>p{font-size:12px;color:#d6c5b9;margin:8px 0 20px}
#interaction-design .viewport-preferences label{display:flex;align-items:center;gap:10px;padding:14px 12px;border:1px solid #a99083;border-radius:10px;font-size:14px;margin:10px 0;background:#514650}
#interaction-design .viewport-summary{display:flex;align-items:center;gap:15px;border-top:1px solid #72636d;padding-top:18px;margin-top:23px}
#interaction-design .viewport-summary img{width:80px;height:100px;object-fit:contain}
#interaction-design .viewport-summary b,#interaction-design .viewport-summary span{display:block}
#interaction-design .viewport-summary b{font:23px Fredoka}
#interaction-design .viewport-summary span{font-size:11px;color:#d6c5b9;margin-top:5px}
#interaction-design .viewport-readout{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:10px;padding-top:15px;color:#526c43}
#interaction-design .viewport-readout>p{width:100%;padding-top:10px;border-top:1px solid #c8d6bb;min-height:28px}
@container (max-width:600px){#interaction-design .viewport-layout{grid-template-columns:1fr;padding:20px;gap:23px}
#interaction-design .viewport-preferences{border-left:0;padding-left:0;border-top:1px solid #72636d;padding-top:20px}
#interaction-design .viewport-main h3{font-size:30px}
#interaction-design .viewport-primary,#interaction-design .viewport-secondary{font-size:22px}
#interaction-design .viewport-summary img{width:60px;height:75px}}
#interaction-design .ui-event-timeline{background:#e7eddf}
#interaction-design .event-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
#interaction-design .event-values>div{border:1px solid #b8c9ab;border-radius:5px;background:#f5f7ec;padding:15px;min-width:0}
#interaction-design .event-values small{display:block;font-size:8px;letter-spacing:.5px;color:#678154;margin-bottom:7px}
#interaction-design .event-values b{display:block;font-size:13px;overflow-wrap:anywhere}
#interaction-design #ui-events{list-style:none;padding:15px 18px;margin:18px 0;background:#2d3b30;border-radius:5px;color:#e1d9c5;min-height:140px;font:11px/1.8 monospace}
#interaction-design #ui-events li{padding:2px 0;overflow-wrap:anywhere}
@media(max-width:1000px){#interaction-design .viewport-controls{gap:15px}
#interaction-design .rig-control{font-size:19px}
#interaction-design .state-samples{gap:12px;padding:18px}
#interaction-design .rig-control img{width:30px;height:40px}}
@media(max-width:760px){#interaction-design .state-rig,#interaction-design .viewport-lab,#interaction-design .ui-event-timeline{padding:17px}
#interaction-design .state-samples{grid-template-columns:1fr;gap:22px}
#interaction-design .rig-control{font-size:22px}
#interaction-design .state-switches{gap:8px}
#interaction-design .state-switches label{font-size:11px;padding:8px 10px}
#interaction-design .state-readout{flex-direction:column;gap:8px}
#interaction-design .state-readout p{max-width:none}
#interaction-design .state-readout span{text-align:left}
#interaction-design .rig-key{gap:10px;font-size:9px}
#interaction-design .viewport-controls{flex-direction:column;align-items:stretch;gap:14px}
#interaction-design .viewport-controls>label:first-child{width:100%}
#interaction-design .viewport-controls .small-button{align-self:start}
#interaction-design .event-values{grid-template-columns:1fr;gap:9px}
#interaction-design .event-values>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px}
#interaction-design .event-values small{margin:0;font-size:7px}
#interaction-design .event-values b{font-size:12px}
#interaction-design .inspect-note{padding:10px;gap:8px}
#interaction-design .inspect-note p{font-size:10px}
#interaction-design .inspect-note b{font-size:11px}
#interaction-design .inspect-region>span{width:20px;height:20px;font-size:10px;left:-6px;top:-6px}
#interaction-design .explore-description{font-size:11px}
#interaction-design .explore-kicker{font-size:7px}}
@media(prefers-reduced-motion:reduce){#interaction-design .rig-control{transition:none}}
#interaction-design .ui-event-timeline{color:var(--ink)}
#interaction-design .rig-control:disabled{transition:none}
#interaction-design .visual-rules>div{display:block;padding:16px;background:#302b32;border-radius:8px;margin-bottom:12px}
#interaction-design .visual-rules>div>b{display:block;color:#e8d9c7;font-size:11px;margin-bottom:15px}
#interaction-design .anatomy-rules .anatomy-button-example{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:14px 18px;border:2px solid #ffebd7;border-radius:16px;background:#ffcab0;color:#35232b;box-shadow:0 4px 0 #ac8174;font:24px/1.25 Fredoka}
#interaction-design .anatomy-button-example span{color:inherit;font:inherit}
#interaction-design .anatomy-rules .phone-example{max-width:280px;min-height:64px;font-size:22px}
#interaction-design .focus-example{outline:3px solid #35232b;outline-offset:-7px}
#interaction-design .anatomy-rules .pressed-example{transform:translateY(2px);box-shadow:0 1px 0 #ac8174}
#interaction-design .long-example{overflow-wrap:anywhere}
#interaction-design .anatomy-ratio-examples{border-top:1px solid #c8d2c0;padding-top:25px;margin-top:30px}
#interaction-design .ratio-captures{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:30px;align-items:start}
#interaction-design .ratio-captures figure{margin:0;min-width:0}
#interaction-design .ratio-captures figcaption{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;font-size:12px}
#interaction-design .ratio-captures figcaption span{font-size:10px;color:var(--muted)}
#interaction-design .ratio-captures img{width:100%;height:auto;max-height:none}
#interaction-design .ratio-captures figure:nth-child(2){max-width:300px;justify-self:center}
#interaction-design .ratio-captures .zoom{width:100%}
@media(max-width:760px){#interaction-design .ratio-captures{grid-template-columns:1fr}
#interaction-design .ratio-captures figure:nth-child(2){max-width:240px}
#interaction-design .anatomy-rules .anatomy-button-example{font-size:22px}}
#interaction-design .state-switches button{min-height:48px;padding:12px 20px;border:2px solid #91a780;border-radius:8px;background:#fffdf4;color:#35482d;font:700 14px Nunito;cursor:pointer;box-shadow:0 3px 0 #becdb2}
#interaction-design .state-switches button:hover{background:#e0e9d4}
#interaction-design .state-switches button[aria-pressed=true]{background:#3d5731;border-color:#3d5731;color:#fff9e9;box-shadow:0 3px 0 #24341e}
#interaction-design .state-switches button:focus-visible{outline:3px solid #a6753f;outline-offset:3px}
#interaction-design .state-rig .state-samples{grid-template-columns:minmax(0,390px);justify-content:center;padding:35px 24px}
#interaction-design .state-rig .rig-control{background:#ffcab0;color:#35232b;border-color:#ffebd7;box-shadow:0 4px 0 #ac8174;padding:14px 24px;justify-content:space-between;min-height:68px;font-size:24px}
#interaction-design .state-rig .rig-control:hover,#interaction-design .state-rig .rig-control.force-hover{background:#ffdfc5;border-color:#fff3dc}
#interaction-design .state-rig .rig-control:focus-visible,#interaction-design .state-rig .rig-control.force-focus{outline-color:#35232b}
#interaction-design .state-rig .rig-control:active,#interaction-design .state-rig .rig-control.force-pressed{box-shadow:0 1px 0 #ac8174}
#interaction-design .flow-start{width:200px;max-width:100%;margin:20px auto 0;text-align:center;background:#fffaf0;border:1px solid #95ab87;border-radius:8px;padding:18px;font:24px Fredoka}
#interaction-design .flow-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:900px;margin:auto}
#interaction-design .flow-path{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
#interaction-design .route-line{color:#8b9f7d;font-size:25px;padding:10px 0}
#interaction-design .flow-path b,#interaction-design .flow-path strong{display:grid;place-items:center;min-height:60px;width:100%;padding:12px 8px;border:1px solid #a9b89c;border-radius:7px;background:#f8f9ef;font:19px Fredoka}
#interaction-design .flow-path.direct b,#interaction-design .flow-path.direct strong{background:#d0dfbb;border-color:#78965f}
#interaction-design .flow-path small{font-size:12px;margin-top:14px;color:#526b44}
#interaction-design .flow-utilities{display:flex;justify-content:center;gap:35px;flex-wrap:wrap;border-top:1px solid #bfceb3;margin-top:25px;padding-top:20px;font-size:12px}
#interaction-design .flow-utilities b{font-weight:400;margin-left:12px;color:#6b7d5f}
#interaction-design .flow-takeaway{text-align:center;font-size:13px;margin-top:24px}
@media(max-width:760px){#interaction-design .flow-paths{gap:9px}
#interaction-design .flow-path b,#interaction-design .flow-path strong{font-size:13px;min-height:54px}
#interaction-design .flow-path small{font-size:10px}
#interaction-design .flow-utilities{gap:12px;font-size:10px}
#interaction-design .flow-takeaway{font-size:11px}
#interaction-design .state-switches button{padding:10px 12px;font-size:12px;flex:1}
#interaction-design .state-rig .state-samples{padding:25px 16px}}
#interaction-design .anatomy-rules .anatomy-button-example,#interaction-design .state-rig .rig-control{
  position: relative;
  justify-content: center;
  padding-inline: 44px;
  text-align: center;
}
#interaction-design .anatomy-button-example > span[aria-hidden],#interaction-design .state-rig .rig-control > span[aria-hidden]{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
#interaction-design .anatomy-rules .anatomy-button-example{ font-size: 24px; }
#interaction-design .anatomy-rules .phone-example{ font-size: 22px; }

/* wireframes.css */
#interaction-design #wire-art{display:grid;grid-template-columns:1fr;gap:24px}
#interaction-design .accurate-wire-card{background:#fafaf8;border:1px solid #c9c9c5;border-radius:5px;padding:22px;min-width:0}
#interaction-design .accurate-wire-card .board-top{border-bottom:0;padding-bottom:16px;margin-bottom:18px;color:#434343}
#interaction-design .accurate-wire-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
#interaction-design .accurate-wire-pair figure{margin:0;min-width:0}
#interaction-design .accurate-wire-pair figcaption{font:700 9px/1.5 Arial,sans-serif;letter-spacing:1px;color:#6b6b6b;margin-bottom:9px}
#interaction-design .accurate-wire-pair .zoom{border:1px solid #c7c7c7;border-radius:0;background:#f7f7f7}
#interaction-design .accurate-wire-pair img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
#interaction-design .wire-accuracy-note{font-size:11px;color:#62665d;border-top:1px solid #d6d6d2;margin-top:18px;padding-top:13px}
@media(max-width:760px){#interaction-design .accurate-wire-card{padding:15px}
#interaction-design .accurate-wire-pair{grid-template-columns:1fr;gap:20px}
#interaction-design .accurate-wire-card .board-top{font-size:7px}
#interaction-design .accurate-wire-card .board-top>span{font-size:6px}
#interaction-design .accurate-wire-pair figcaption{font-size:8px}
#interaction-design .wire-accuracy-note{font-size:10px}}

#interaction-design { padding-top: 64px; }
#interaction-design .exploration-heading { padding-bottom: 36px; }
#interaction-design .exploration-heading h2 { max-width: 850px; }
#interaction-design .exploration-heading > p:last-child { margin-top: 20px; }
#interaction-design .wrap { width: min(1216px, calc(100% - 96px)); }
#interaction-design p { color: inherit; }
#interaction-design .caption { color: var(--muted); }
#interaction-design .evidence-note { padding-bottom: 48px; }
@media (max-width: 760px) {
 #interaction-design .wrap { width: calc(100% - 40px); }
 #interaction-design .exploration-heading h2 { font-size: 36px; }
 .site-header nav { flex-wrap: wrap; }
}

#interaction-design .chapter-number { position: static; padding: 0; background: transparent; }

/* Navigation verified against the game handlers. */
.verified-flow .verified-origin { display: inline-block; margin: 0 0 20px; padding: 12px 24px; border-radius: 24px; background: #284438; color: #fff4e1; font: 500 21px Fredoka, sans-serif; }
.verified-flow .verified-route { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; }
.verified-flow .verified-step { flex: 1; min-width: 0; padding: 16px; border: 1px solid #ced7c4; border-radius: 10px; background: #fffaf0; }
.verified-flow .verified-step b { display: block; font: 500 18px/1.3 Fredoka, sans-serif; color: #293c33; }
.verified-flow .verified-step small { display: block; margin-top: 7px; font: 12px/1.5 Nunito, sans-serif; color: #59695e; }
.verified-flow .verified-end { background: #dce7cf; }
.verified-flow .verified-arrow { align-self: center; font-size: 22px; color: #637b58; }
.verified-flow .verified-utilities { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid #bdcbb1; margin-top: 24px; padding-top: 20px; }
.verified-flow .verified-utilities p, .verified-flow .verified-note { font: 13px/1.7 Nunito, sans-serif; color: #52634c; margin: 0; }
.verified-flow .verified-note { margin-top: 20px; }
#interaction-design .verified-full { padding: 28px; background: #edf1e4; border: 1px solid #c8d2c0; border-radius: 12px; }
#interaction-design .verified-loop { border-top: 1px solid #bdcbb1; padding-top: 24px; margin-top: 28px; }
#interaction-design .verified-loop h4 { font: 500 24px Fredoka, sans-serif; margin-bottom: 20px; }
#interaction-design .verified-loop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#interaction-design .verified-loop article { background: #fffaf0; border: 1px solid #ced7c4; border-radius: 10px; padding: 20px; }
#interaction-design .verified-loop h5 { font: 500 20px Fredoka, sans-serif; margin: 0 0 12px; }
#interaction-design .verified-loop p, #interaction-design .verified-loop li { font: 12px/1.7 Nunito, sans-serif; }
#interaction-design .verified-loop ul { padding-left: 18px; margin: 12px 0; }
#interaction-design .verified-loop li + li { margin-top: 8px; }
#interaction-design .verified-source { font-size: 11px; color: #59695e; margin-top: 24px; }
@media (max-width: 760px) {
 .verified-flow .verified-route { flex-direction: column; gap: 7px; margin-top: 24px; }
 .verified-flow .verified-arrow { transform: rotate(90deg); line-height: 1; }
 .verified-flow .verified-utilities { grid-template-columns: 1fr; gap: 12px; }
 #interaction-design .verified-full { padding: 20px; }
 #interaction-design .verified-loop-grid { grid-template-columns: 1fr; }
}