:root{
  --paper:#bda975;
  --ink:#171713;
  --panel:rgba(31,29,22,.78);
  --soft:rgba(255,249,221,.86);
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#88c7d3;color:var(--ink);font-family:Georgia,'Times New Roman',serif;touch-action:none;-webkit-user-select:none;user-select:none}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;background:#88c7d3}
.panel{position:fixed;inset:0;display:none;align-items:stretch;justify-content:stretch;padding:0;background:#d8c892;z-index:20}
.panel.visible{display:flex}
.intro-stage{position:relative;width:100%;min-height:100%;display:grid;grid-template-columns:minmax(320px,1.02fr) minmax(260px,.72fr);align-items:center;gap:clamp(22px,5vw,70px);padding:clamp(34px,6vw,84px);background:radial-gradient(circle at 82% 44%,rgba(105,127,91,.22),transparent 34%),linear-gradient(120deg,#eadca9 0%,#d6c48b 54%,#8aa09d 100%);overflow:hidden}
.intro-stage::before{content:"";position:absolute;inset:auto -8% -28% 38%;height:56%;background:radial-gradient(ellipse at center,rgba(37,48,36,.18),rgba(37,48,36,0) 68%);pointer-events:none}
.intro-stage::after{content:"";position:absolute;right:-7%;top:-16%;width:45vw;height:45vw;border-radius:999px;background:rgba(239,231,190,.18);pointer-events:none}
.intro-copy{position:relative;z-index:2;align-self:center;max-width:650px;text-align:left}
.eyebrow{margin:0px 70px;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;opacity:.76;font-family:system-ui,sans-serif}
h1{margin:0;font-size:clamp(3.2rem,9vw,6.6rem);font-weight:500;letter-spacing:.01em;line-height:.9}
.lead{font-size:clamp(1.08rem,2.05vw,1.38rem);line-height:1.48;max-width:620px;margin:26px 0 30px;color:#252116;text-wrap:balance}
.primary{border:3px solid #1b1914;background:#e1d49d;color:#14130f;padding:14px 34px;border-radius:999px;font-size:1.08rem;font-family:system-ui,sans-serif;font-weight:700;cursor:pointer;box-shadow:4px 5px 0 rgba(0,0,0,.35)}
.primary:active{transform:translate(3px,3px);box-shadow:1px 2px 0 rgba(0,0,0,.35)}
.signature{margin:28px 0 0;font-size:1rem;color:#252116} .signature a {color:rgb(114 100 54);}
.intro-prota{position:relative;z-index:1;justify-self:center;align-self:middle;width:min(40vw,520px);max-height:100vh;object-fit:contain;transform:translateY(2vh)}
#hud{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 13px) 16px 0;pointer-events:none;font-family:system-ui,sans-serif;color:#16140f;}
.brand{pointer-events:auto;border:0;background:transparent;padding:0;font-size:1.25rem;font-weight:400!important;letter-spacing:.03em;color:inherit;text-shadow:inherit;cursor:pointer}.music-indicator{min-width:48px;height:32px;display:grid;place-items:center;border:2px solid rgba(21,19,13,.66);border-radius:999px;background:rgb(211 111 4 / 50%);font-family:system-ui,sans-serif;font-size:.92rem;font-weight:900;line-height:1;color:#17140e;box-shadow:0 6px 18px rgba(20,18,12,.16);animation:musicPulse 1.65s ease-in-out infinite;pointer-events:none;padding:0 9px;white-space:nowrap}.music-indicator[hidden]{display:none}@keyframes musicPulse{0%,100%{transform:scale(1);opacity:.78}45%{transform:scale(1.08);opacity:1}}.ghost{pointer-events:auto;border:2px solid rgba(21,19,13,.7);background:rgba(246,232,173,.38);border-radius:999px;padding:8px 12px;color:#17140e;font-weight:700;cursor:pointer;text-transform:lowercase}#editorBtn{margin-left:auto}.ghost.on{background:#1d1a14;color:#eadfa9}
.editor-panel[hidden]{display:none}.editor-panel{position:fixed;right:16px;top:0;z-index:18;width:min(340px,calc(100vw - 32px));max-height:100vh;overflow:auto;padding:14px;border:2px solid rgba(21,19,13,.72);border-radius:14px;background:rgba(238,226,185,.92);box-shadow:0 16px 52px rgba(0,0,0,.28);font-family:system-ui,sans-serif;color:#1a1710}.editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.editor-panel label{display:grid;gap:5px;font-size:.82rem;font-weight:800}.editor-panel select,.editor-panel textarea{width:100%;border:1px solid rgba(21,19,13,.45);border-radius:8px;background:rgba(255,250,225,.72);color:#17140e;font:inherit}.editor-panel select{height:36px;padding:0 8px}.editor-panel textarea{height:132px;margin-top:10px;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;resize:vertical}.editor-row{display:flex;gap:8px;margin-top:9px}.editor-row button,.editor-grid button,.mini,.editor-panel .wide{border:1px solid rgba(21,19,13,.55);border-radius:8px;background:rgba(255,249,221,.62);color:#17140e;font-weight:800;cursor:pointer;padding:8px 9px}.editor-row button{flex:1}.editor-panel .wide{width:100%;margin-top:9px}.mini{padding:5px 8px}.editor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}.editor-status{margin:9px 0 0;font-size:.78rem;color:#393426}
.coords{margin:10px 0 0;padding:8px;border:1px solid rgba(21,19,13,.35);border-radius:8px;background:rgba(255,250,225,.58);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.35;white-space:pre-wrap;user-select:text;-webkit-user-select:text;max-height:150px;overflow:auto;color:#252116}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:22px;background:rgba(18,22,23,.36);backdrop-filter:blur(5px)}.modal-card{position:relative;width:min(440px,92vw);padding:24px 24px 20px;border:2px solid rgba(21,19,13,.72);border-radius:16px;background:rgba(239,226,181,.92);box-shadow:0 20px 70px rgba(0,0,0,.32);font-family:system-ui,sans-serif}.modal-card h2{margin:0 0 16px;font-family:Georgia,serif;font-size:2rem;line-height:1}.close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:2px solid rgba(21,19,13,.58);border-radius:999px;background:rgba(255,249,221,.62);font-size:1.35rem;line-height:1;cursor:pointer}.key-list{margin:0;display:grid;gap:8px}.key-list div{display:grid;grid-template-columns:minmax(94px,auto) 1fr;gap:14px;align-items:center;padding:8px 0;border-top:1px solid rgba(21,19,13,.18)}.key-list dt{font-weight:800}.key-list dd{margin:0;color:#302c20}
#touchControls{display:none;position:fixed;inset:0;z-index:8;pointer-events:none}#joyBase{position:absolute;right:calc(env(safe-area-inset-right) + 24px);bottom:calc(env(safe-area-inset-bottom) + 34px);width:118px;height:118px;border:2px solid rgba(21,19,14,.48);border-radius:999px;background:rgba(246,232,173,.18);pointer-events:auto;touch-action:none;z-index:3}#joyKnob{position:absolute;left:38px;top:38px;width:42px;height:42px;border-radius:999px;background:rgba(26,24,18,.62);border:2px solid rgba(245,230,170,.55)}#lookPad{position:absolute;left:26vw;right:26vw;top:0;height:100%;pointer-events:auto;touch-action:none;z-index:1}#runTouch{position:absolute;left:calc(env(safe-area-inset-left) + 28px);bottom:calc(env(safe-area-inset-bottom) + 42px);pointer-events:auto;border:2px solid rgba(25,22,15,.55);background:rgba(246,232,173,.34);color:#17140e;border-radius:999px;width:112px;height:44px;padding:0 14px 0 48px;font-family:system-ui,sans-serif;font-size:.78rem;font-weight:850;text-align:right;text-transform:lowercase;z-index:3;box-shadow:0 6px 18px rgba(20,18,12,.12);transition:background .2s ease,color .2s ease,padding .2s ease}#runTouch::after{content:"";position:absolute;left:5px;top:5px;width:30px;height:30px;border-radius:50%;background:rgba(26,24,18,.7);border:1px solid rgba(245,230,170,.5);box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .2s ease,background .2s ease}#runTouch.active{background:rgba(27,24,18,.72);color:#fff3c4;padding:0 48px 0 14px;text-align:left}#runTouch.active::after{transform:translateX(66px);background:#f6e8ad}
#joyBase,
#runTouch,
#lookPad {
  touch-action: none;
}
.fallback[hidden]{display:none}.fallback{position:fixed;inset:0;z-index:30;display:grid;place-content:center;padding:30px;text-align:center;background:#b9a36d;color:#201d14}
.home-transition{position:fixed;inset:0;z-index:28;display:grid;place-items:center;background:#fffdf1;color:#171713;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s}.home-transition span{font-family:var(--brand-font);font-size:clamp(3.4rem,11vw,8.8rem);font-weight:500;letter-spacing:.02em;opacity:0;transform:scale(.98);transition:opacity .34s ease .12s,transform .7s ease}.home-transition.visible{opacity:1;visibility:visible;transition:opacity .24s ease,visibility 0s}.home-transition.visible span{opacity:1;transform:scale(1)}.home-transition.leaving{opacity:0;transition:opacity .72s ease}.home-transition.leaving span{opacity:0;transform:scale(1.015);transition:opacity .36s ease,transform .72s ease}
@media (hover:none),(pointer:coarse){#touchControls{display:block}.editor-panel{top:0;right:10px;width:calc(100vw - 20px)}}

@media (max-width:720px){
  .panel{padding:0;background:#d8c892}
  .intro-stage{min-height:100%;width:100%;grid-template-columns:1fr;padding:calc(env(safe-area-inset-top) + 54px) 24px calc(env(safe-area-inset-bottom) + 22px);align-items:start;background:linear-gradient(180deg,#eadca9 0%,#d7c68f 58%,#89a19e 100%)}
  .intro-copy{text-align:center;max-width:none;align-self:start}
  .lead{max-width:31rem;margin:20px auto 24px;font-size:clamp(1rem,4.2vw,1.16rem);line-height:1.42}
  .signature{margin-top:14px}
  .intro-prota{position:absolute;right:4%;bottom:-10px;width: min(90vw,480px);max-height:40vh;opacity:.95;transform:none}
}

@media (max-height:620px){
  .intro-stage{min-height:100%;padding-top:22px;padding-bottom:16px}
  .lead{font-size:1rem;margin-top:16px;margin-bottom:18px}
  .intro-prota{max-height:70vh}
}

.modal-foot{margin:18px 0 0;padding-top:12px;border-top:1px solid rgba(21,19,13,.2);font-size:.88rem;font-weight:800}.modal-foot a{color:#17140e;text-decoration:none}.modal-foot a:hover{text-decoration:underline}

.modal-card{max-height:calc(100vh - 44px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.idea-card{width:min(760px,94vw);padding:24px 24px 20px}.idea-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px);gap:22px;align-items:stretch}.idea-text{min-width:0}.idea-prota{align-self:stretch;justify-self:center;width:100%;height:100%;max-height:calc(100vh - 108px);object-fit:contain;object-position:bottom center;filter:drop-shadow(0 18px 20px rgba(0,0,0,.24));padding-top:34px}
@media (max-width:720px){.idea-card{width:min(440px,92vw);padding:22px 20px 18px}.idea-layout{grid-template-columns:1fr;gap:10px}.idea-prota{order:-1;justify-self:end;width:min(34vw,118px);height:auto;max-height:150px;padding-top:0;margin:-6px 28px -6px 0}.idea-text{text-align:left}}

:root{--brand-font:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif}
h1,.brand,.modal-card h2{font-family:var(--brand-font)}
h1{font-weight:500}.brand{font-weight:700}.modal-card h2{font-weight:500}

#planetTouch{position:absolute;left:calc(env(safe-area-inset-left) + 28px);bottom:calc(env(safe-area-inset-bottom) + 130px);pointer-events:auto;border:2px solid rgba(25,22,15,.55);background:rgba(246,232,173,.28);color:#17140e;border-radius:999px;width:78px;height:78px;font-family:system-ui,sans-serif;font-weight:800;text-transform:lowercase;touch-action:none;z-index:3}#planetTouch.active{background:rgba(27,24,18,.67);color:#fff3c4}
.editor-poly-info {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  opacity: .78;
  line-height: 1.35;
}
.editor-poly-info[hidden]{display:none}
.editor-poly-info.floating{position:fixed;left:calc(env(safe-area-inset-left) + 14px);bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:17;margin:0;padding:7px 10px;border:1px solid rgba(21,19,13,.38);border-radius:6px;background:rgba(239,226,181,.82);color:#242117;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.25;box-shadow:0 6px 20px rgba(0,0,0,.14);pointer-events:none;opacity:.82}