.travel{position:relative;flex:1;width:min(1440px,100%);margin:0 auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding:24px 32px 28px;min-height:calc(100svh - 90px)}
.destination-bar{width:min(380px,100%);margin:0 auto;text-align:center;grid-column:1/-1;grid-row:1;z-index:2}
#travel-form label{font-size:14px;color:#566761}.type-line{display:flex;border-bottom:1px solid #bac9c2;margin:12px 0 0;align-items:center}.type-line input{font:inherit;font-size:23px;min-width:0;width:100%;border:0;background:none;color:#172129;padding:9px 0;outline-offset:4px}.type-line input::placeholder{color:#8c9690}.type-line button{background:none;border:0;font-size:26px;cursor:pointer;padding:4px 12px}#travel-feedback{font-size:12px;color:#75817b;margin:12px 0 0;min-height:20px}
.board-stage{position:relative;min-width:0;grid-column:1;grid-row:2;align-self:center}.travel #key-scene{width:100%;height:max(520px,calc(100svh - 260px))}
.destination-bubbles{position:absolute;inset:0;pointer-events:none}.destination-bubbles button{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:118px;border:1px solid #d6ded9;background:#f5f6ef;padding:13px 23px;border-radius:40px;box-shadow:0 5px 16px #23413b08;cursor:pointer;animation:bubble-drift 6s ease-in-out infinite;transition:background .2s,border-color .2s,box-shadow .2s;color:#233f3d}.destination-bubbles span{font-size:15px;font-weight:600}.destination-bubbles small{font-size:10px;letter-spacing:.02em;color:#78837d}.destination-bubbles [data-go=work]{left:11%;top:12%;background:#f3efc9}.destination-bubbles [data-go=projects]{right:10%;top:17%;background:#e8f1dd;animation-delay:-2s}.destination-bubbles [data-go=josh]{left:13%;bottom:14%;background:#f4e5ed;animation-delay:-4s}.destination-bubbles [data-go=keyboards]{right:10%;bottom:9%;background:#dfefed;animation-delay:-1s}.destination-bubbles button:hover,.destination-bubbles button.matching,.destination-bubbles button[aria-current]{border-color:#278f8c;box-shadow:0 0 0 4px #299c9517;background:#d7eeea}.destination-bubbles button:hover{animation-play-state:paused}.destination-bubbles button.matching small{color:#176f6b}
@keyframes bubble-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.story{grid-column:2;grid-row:2;align-self:center;padding:32px;max-height:calc(100svh - 270px);overflow:auto}.story[hidden]{display:none}.story h1{font-size:42px}.story h1:focus{outline:none}.story .back{margin-bottom:28px}.back span{font-size:10px;margin-left:12px;color:#87908a}.story .entries,.story .project{margin-top:24px}.story .lead{font-size:16px}.story .entries article{padding:16px 0}.story .entry-heading{display:block}.story .entry-heading h2{font-size:21px}.story .keyboard-photo>img{height:220px}.story .bio-photo{width:76px;height:90px}.story p{font-size:14px}.visiting .travel{grid-template-columns:1fr 1fr}.visiting .destination-bubbles button{padding:9px 16px;min-width:95px}.visiting .destination-bubbles [data-go=work]{left:3%}.visiting .destination-bubbles [data-go=projects]{right:3%}.visiting .destination-bubbles [data-go=josh]{left:3%}.visiting .destination-bubbles [data-go=keyboards]{right:3%}
@media(max-width:700px){.travel{padding:20px 14px 20px}.type-line input{font-size:21px}.travel #key-scene{height:max(490px,calc(100svh - 250px))}.destination-bubbles button{padding:10px 17px;min-width:100px}.destination-bubbles [data-go=work]{left:4%;top:9%}.destination-bubbles [data-go=projects]{right:3%;top:13%}.destination-bubbles [data-go=josh]{left:6%;bottom:16%}.destination-bubbles [data-go=keyboards]{right:2%;bottom:10%}.visiting .travel{display:flex;flex-direction:column}.visiting .board-stage{width:100%}.visiting #key-scene{height:310px}.visiting .destination-bubbles [data-go=work],.visiting .destination-bubbles [data-go=projects]{top:5%}.visiting .destination-bubbles [data-go=josh],.visiting .destination-bubbles [data-go=keyboards]{bottom:0}.story{padding:32px 6px;max-height:none;width:100%}.story h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){.destination-bubbles button{animation:none;transition:none}}

/* Spellkey summons plain destination words; no bubble surface or physics. */
.spell-nav{position:absolute;top:32px;left:24%;right:8%;height:110px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}
.spell-nav button{pointer-events:auto;border:0;background:none;padding:14px 8px;min-height:44px;cursor:pointer;color:#748079;font-size:15px;transition:transform .25s,color .25s;}
.spell-nav button:nth-child(1){margin-top:34px}.spell-nav button:nth-child(2){margin-top:8px}.spell-nav button:nth-child(3){margin-top:0}.spell-nav button:nth-child(4){margin-top:23px}
.spell-nav button span{display:block;animation:summon-word .85s cubic-bezier(.22,1,.36,1) both;animation-delay:.28s}
.spell-nav button:nth-child(2) span{animation-delay:.42s}.spell-nav button:nth-child(3) span{animation-delay:.56s}.spell-nav button:nth-child(4) span{animation-delay:.7s}
.spell-nav button:hover,.spell-nav button.matching,.spell-nav button[aria-current]{color:#173f3c;transform:translateY(-5px)}
.spellkeeper{position:absolute;left:11%;top:124px;width:68px;height:76px;pointer-events:none;z-index:2;transition:transform .35s ease,opacity .3s ease}
.spellkeeper-lean{transform-origin:50% 85%;transform:rotate(var(--lean,0deg));transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.spellkeeper-arrival{display:block;width:68px;height:68px;transform-origin:50% 90%;animation:summon-hop 1s ease both}
.visiting .spellkeeper{transform:translateY(65px) scale(.85);opacity:0}.visiting .spell-nav{left:3%;right:3%}.visiting .spell-nav button{font-size:13px;padding:14px 4px}
@keyframes summon-hop{0%{transform:translateY(22px) scale(.9);opacity:0}20%{transform:translateY(0) scale(1.12,.82);opacity:1}48%{transform:translateY(-23px) rotate(-12deg) scale(.96,1.05)}72%{transform:translateY(0) scale(1.08,.9)}100%{transform:none;opacity:1}}
@keyframes summon-word{from{opacity:0;transform:translate(-35px,42px) rotate(-12deg) scale(.85)}to{opacity:1;transform:none}}
.destination-bar{width:min(330px,100%)}#travel-form label{font-size:12px}.type-line input{font-size:20px}#travel-feedback{font-size:11px}
@media(max-width:700px){.spell-nav{left:15%;right:0;top:24px;gap:0}.spell-nav button{font-size:13px;padding:14px 5px}.spellkeeper{left:3%;top:115px;width:52px;height:60px}.spellkeeper-arrival{width:52px;height:52px}.visiting #key-scene{height:320px}}
@media(prefers-reduced-motion:reduce){.spellkeeper,.spellkeeper-lean,.spell-nav button{transition:none}.spellkeeper-arrival,.spell-nav button span{animation:none}}
.header-identity{display:flex;align-items:center;gap:10px}header{position:relative;z-index:5;padding-top:18px;padding-bottom:18px}
.spellkey-button{width:86px;height:62px;flex-shrink:0;padding:0;background:none;border:0;cursor:pointer;overflow:visible}.spellkey-button svg{display:block;width:100%;height:100%;overflow:visible}.rubber-arm{fill:none;stroke:#111;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}.arm-left{transform-origin:48px 130px}.arm-right{transform-origin:190px 129px}.glove{fill:#fafaf7;stroke-width:5}.performer-body{transform-origin:120px 190px}.performer-eye{transform-origin:122px 125px;animation:performer-blink 6s infinite}.performer-pupil{transform:translateX(var(--look,0px));transition:transform .25s}.spell-nav button span{animation:none!important;position:relative;z-index:4}
@keyframes performer-blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.12)}}
@media(max-width:700px){.spellkey-button{width:72px;height:54px}.header-identity{gap:7px}}
@media(prefers-reduced-motion:reduce){.performer-eye{animation:none}.performer-pupil{transition:none}}
/* Arms tuck into the body at rest; glove gestures animate independently. */
.rubber-arm{opacity:0;transform:scale(.12)}.rubber-hand{transform-box:fill-box;transform-origin:center}
.hand-fist{opacity:0}.rubber-hand{transform-origin:50% 85%}.glove{stroke-width:4.5}.spellkey-button{width:98px;height:70px}
.spell-nav,.visiting .spell-nav{left:7%;right:7%;top:18px;height:180px;display:block}
.spell-nav button,.visiting .spell-nav button{position:absolute;margin:0!important;padding:12px 4px;min-height:44px;white-space:nowrap}
.word-idle{font-style:normal;display:block;animation:word-hover 6s ease-in-out infinite;animation-delay:var(--idle-delay,0s)}

.spell-nav button:hover .word-idle,.spell-nav button:focus-visible .word-idle{animation-play-state:paused}
@keyframes word-hover{0%,100%{transform:translate(0,0) rotate(-1deg)}50%{transform:translate(3px,-7px) rotate(1deg)}}
.type-line{position:relative}.typing-suggestion{position:absolute;left:0;display:flex;align-items:center;gap:5px;pointer-events:none;color:#82918a;font-size:20px}.prompt-caret{display:block;width:1px;height:21px;background:#42615a;animation:prompt-blink 1.2s steps(1) infinite}.type-line.has-value .typing-suggestion,.type-line:focus-within .typing-suggestion{display:none}
@keyframes prompt-blink{50%{opacity:0}}
@media(max-width:700px){.spellkey-button{width:82px;height:60px}.spell-nav,.visiting .spell-nav{left:5%;right:5%;height:180px;top:10px}}
@media(prefers-reduced-motion:reduce){.word-idle,.prompt-caret{animation:none}}
.type-line:not(.has-value):focus-within .typing-suggestion{display:flex}.type-line:focus-within .prompt-caret{opacity:0;animation:none}

.destination-caret{display:inline-block;position:relative;width:0;height:1em;vertical-align:-.12em;border-left:1px solid #254f47;animation:prompt-blink 1.2s steps(1) infinite;pointer-events:none}.word-idle{white-space:pre}
@media(prefers-reduced-motion:reduce){.destination-caret{animation:none}}

/* Local minimal preview: the floating words are the visible typing surface. */
.destination-bar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#travel-form{display:none}
.travel{grid-template-rows:1fr}
.board-stage,.story{grid-row:1}

/* Rounded cartoon gloves with rolled cuffs and a distinct pointing pose. */
.rubber-arm{stroke-width:15}
.glove{stroke-width:4.5}
.glove-crease{stroke-width:2.8}
.hand-point{opacity:0}

/* Spellkey keeps his eye and word gestures without visible arms or hands. */
.spellkey-button .rubber-arm{display:none}

/* The destination word itself is the visible typing surface. */
.spell-nav button.matching{color:#748079}
.typed-letters{font-weight:600;color:#173f3c}
.enter-cue{position:absolute;left:calc(100% + 8px);top:0;font-size:13px;color:#173f3c;font-style:normal}

/* The scene makes room for the section while its content arrives. */
.travel{grid-template-columns:minmax(0,1fr) minmax(0,0fr);transition:grid-template-columns 380ms cubic-bezier(.22,1,.36,1)}
.visiting .travel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.story{min-width:0;overflow-x:hidden}
.spell-nav button{transition:opacity 240ms ease,color 240ms ease,transform 240ms ease}
.visiting .spell-nav button:not([aria-current]){opacity:.48}
.visiting .spell-nav button:hover,.visiting .spell-nav button:focus-visible,.visiting .spell-nav button.matching{opacity:1}
.travel #key-scene{transition:height 380ms cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.travel,.travel #key-scene,.spell-nav button{transition:none}}

.set-hint{display:block;margin:0 auto 24px;border:0;background:none;font:inherit;font-size:13px;color:#58665f;padding:12px;cursor:pointer;min-height:44px}.set-hint span{margin-left:9px}.set-hint:hover,.set-hint:focus-visible{color:#173f3c;text-decoration:underline;text-underline-offset:5px}.visiting .set-hint,.visiting .set-detail{display:none}.set-detail{position:absolute;right:3%;bottom:65px;width:min(280px,calc(100% - 32px));padding:28px;background:#fafaf5;border:1px solid #dce1d9;border-radius:10px;z-index:5;box-shadow:0 12px 36px #23362e12}.set-detail[hidden]{display:none}.set-detail h2{font-size:17px;font-weight:500;margin:20px 0 12px}.set-detail p{font-size:14px;line-height:1.6;color:#58665f;margin-bottom:12px}.set-detail .set-credit{font-size:12px}.set-detail a{font-size:13px;text-decoration:underline;text-underline-offset:4px}.set-close{position:absolute;right:8px;top:8px;width:36px;height:36px;border:0;background:none;font-size:21px;cursor:pointer;color:#58665f}.set-lettering{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:44px;color:#f5e8bf;text-shadow:1px 2px #533b55,2px 4px #533b55,3px 6px #533b55;padding:24px 0 12px;text-align:center;transform:rotate(-5deg)}
@media(max-width:600px){.set-detail{right:16px;bottom:64px}.set-hint{margin-bottom:8px}}

/* Desktop discovery lives on the Escape key; touch retains an explicit control. */
.set-hint{opacity:0;pointer-events:none}.set-hint:focus-visible{opacity:1;pointer-events:auto}
.set-detail{width:238px;padding:18px 20px;right:auto;bottom:auto;top:60%;left:12%;border-radius:8px;box-shadow:0 8px 24px #23362e10}
.set-detail .set-lettering,.set-detail .set-credit{display:none}.set-detail h2{font-size:14px;margin:0 24px 8px 0}.set-detail p{font-size:12px;margin-bottom:12px}.set-detail a{font-size:12px}.set-close{width:28px;height:28px;right:5px;top:5px;font-size:17px}
@media(hover:none),(pointer:coarse){.set-hint{opacity:1;pointer-events:auto}}

/* Warm paper surface and a restrained frosted-white preview. */
html,body{background:#f5f4ef}
.set-detail{background:rgba(255,255,252,.78);border:1px solid rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(1.08);-webkit-backdrop-filter:blur(16px) saturate(1.08);box-shadow:0 8px 28px rgba(40,47,41,.09),inset 0 1px rgba(255,255,255,.8)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.set-detail{background:#fafaf6;border-color:#e0e2db}}
@media(prefers-reduced-transparency:reduce){.set-detail{background:#fafaf6;backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Let the studio's near-white floor blend with the surrounding warm paper. */
.keyboard-render{background:#f5f4ef;mix-blend-mode:multiply;filter:brightness(1.025)}

/* Compact two-line set preview. */
.set-detail{width:218px;padding:15px 17px;border-color:rgba(255,255,255,.6);box-shadow:0 5px 18px rgba(40,47,41,.06)}
.set-detail h2{font-size:13px;line-height:1.5;font-weight:500;margin:0 22px 5px 0}
.set-detail a{display:inline-block;font-size:12px;line-height:1.6;color:#58665f;text-decoration:none}
.set-detail a:hover{text-decoration:underline;text-underline-offset:4px}
.set-close{color:#6c756e;font-size:15px}

/* Approved one-eye motion owns SVG transforms; no competing CSS blink. */
.spellkey-button { touch-action: none; user-select: none; }
.spellkey-button .performer-body { transform-origin: 0 0; }
.spellkey-button .performer-eye { animation: none; transform-origin: 0 0; }
.spellkey-button .performer-pupil { transform: none; transition: none; }

/* Tiny outline Spelky: local design preview only. */
.spellkey-button{width:24px;height:24px;margin:0;overflow:visible}
#app > header{padding:10px 12px}

/* Give the floating homepage destinations a little more presence. */
body:not(.visiting) .spell-nav button{font-size:17px;font-weight:600}
@media(max-width:700px){
 body:not(.visiting) .spell-nav button{font-size:15px}
}

/* Leave more air around the keyboard without resizing its render canvas.
   Keep this scale through section transitions to avoid a size jump. */
.travel .keyboard-render{transform:scale(.9);transform-origin:center}

/* Gather the floating destinations over the keyboard instead of the page edges. */
@media(min-width:701px){
 body:not(.visiting) .spell-nav{left:18%;right:18%}
}
@media(max-width:700px){
 body:not(.visiting) .spell-nav{left:9%;right:9%}
}