:root{color:#151515;font-synthesis:none;text-rendering:optimizelegibility;background:radial-gradient(circle at 14% 12%,#5de0b1 0 13%,#0000 26%),radial-gradient(circle at 82% 18%,#ff8a64 0 11%,#0000 25%),radial-gradient(circle at 52% 92%,#6c8cff 0 14%,#0000 28%),#d9dde4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;min-width:320px;height:100%;margin:0}body{overscroll-behavior:none;min-height:100dvh}button,input{font:inherit}button{color:#fff;cursor:pointer;touch-action:manipulation;background:#151515;border:0;border-radius:8px;min-height:44px;padding:0 14px;font-weight:800}button.secondary{color:#151515;background:#e8e3d6}button.text-button{color:#151515;background:0 0;min-height:34px;padding:0}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #4fb286}input{color:#151515;background:#fffaf1;border:1px solid #d2cbbb;border-radius:8px;width:100%;min-height:46px;padding:0 12px}h1,h2,h3,p{overflow-wrap:anywhere;margin:0}h1{letter-spacing:0;font-size:1.65rem;line-height:1}h2{letter-spacing:0;font-size:1.15rem;line-height:1.12}h3{letter-spacing:0;font-size:1.55rem;line-height:1.05}p{color:#5b5a53;font-size:.92rem;line-height:1.42}.phone-shell{background:linear-gradient(#fffaf1eb,#f6f0e2f5),radial-gradient(circle at 12% 7%,#4fb28642,#0000 34%),radial-gradient(circle at 86% 20%,#ef6f4d3d,#0000 30%);flex-direction:column;width:min(100%,430px);height:100dvh;min-height:0;margin:0 auto;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffb3,0 0 0 1px #00000014,0 24px 80px #00000038}.app-header{padding:max(14px, env(safe-area-inset-top)) 16px 10px;justify-content:space-between;gap:12px;display:flex}.brand,.eyebrow,.card-kicker{color:#676256;letter-spacing:0;text-transform:uppercase;font-size:.72rem;font-weight:900;display:inline-block}.header-actions{align-items:flex-start;gap:8px;display:flex}.header-actions span,.round-header>span{color:#403d35;white-space:nowrap;background:#fffaf1;border:1px solid #d6cebd;border-radius:999px;padding:7px 10px;font-size:.74rem;font-weight:900}.header-actions button{min-height:31px;padding:0 10px}.header-actions .mini-button{color:#151515;background:#e8e3d6}.progress-strip{background:linear-gradient(135deg,#fffaf1,#ecf8f2);border:1px solid #ded6c6;border-radius:8px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:0 16px;padding:10px;display:grid}.progress-strip.receiving{animation:.32s progress-pop}.progress-strip div:first-child,.progress-strip div:last-child{gap:2px;display:grid}.progress-strip span{color:#6b675c;text-transform:uppercase;font-size:.72rem;font-weight:900}.progress-strip strong{font-size:.92rem}.level-track{background:#e5ddcc;border-radius:999px;height:10px;overflow:hidden}.level-track i{border-radius:inherit;background:#4fb286;height:100%;display:block}.save-bar{grid-template-columns:1fr auto;gap:8px;padding:12px 16px;display:grid}.mode-tabs{grid-template-columns:repeat(4,1fr);gap:6px;padding:0 16px 12px;display:grid}.mode-tabs button{color:#151515;background:#e8e3d6;min-height:36px;padding:0 8px;font-size:.78rem}.mode-tabs button.active{color:#fff;background:linear-gradient(135deg,#151515,#3147a3)}.mode-surface{min-height:0;padding:0 16px calc(90px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.mode-stack,.paper-mode,.graph-mode,.system-mode{gap:12px;display:grid}.loading-mascot-card{background:radial-gradient(circle at 20% 20%,#4fb28647,#0000 26%),radial-gradient(circle at 80% 28%,#ef6f4d38,#0000 28%),linear-gradient(145deg,#fffaf1,#e8f7ff 52%,#ffe4b8);border:1px solid #ded6c6;border-radius:8px;align-content:center;gap:14px;min-height:clamp(320px,100dvh - 300px,520px);padding:22px;display:grid;overflow:hidden;box-shadow:inset 0 1px #ffffffb3,0 18px 38px #15151524}.mascot-scene{place-items:center;height:min(270px,33dvh);display:grid;position:relative}.mascot-image{object-fit:contain;filter:drop-shadow(0 22px 24px #15151529);width:min(92%,330px);height:auto;max-height:250px;animation:1.4s ease-in-out infinite mascot-bob}.fetch-orbit{color:#151515;background:#fffaf1;border:3px solid #151515;border-radius:999px;place-items:center;width:62px;height:38px;font-size:.78rem;font-weight:950;display:grid;position:absolute;box-shadow:0 8px 20px #1515152e}.fetch-orbit.one{animation:2.2s ease-in-out infinite orbit-one}.fetch-orbit.two{animation:2.4s ease-in-out infinite orbit-two}.fetch-orbit.three{animation:2s ease-in-out infinite orbit-three}.loading-steps{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.loading-steps span{color:#fff;background:#151515;border-radius:999px;place-items:center;min-height:40px;font-size:.72rem;font-weight:900;animation:1.2s ease-in-out infinite step-pulse;display:grid}.loading-steps span:nth-child(2){animation-delay:.18s}.loading-steps span:nth-child(3){animation-delay:.36s}.round-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}@keyframes mascot-bob{0%,to{transform:translateY(0)rotate(-.8deg)}50%{transform:translateY(-10px)rotate(.8deg)}}@keyframes orbit-one{0%,to{transform:translate(-122px,-74px)rotate(-8deg)}50%{transform:translate(-82px,-118px)rotate(8deg)}}@keyframes orbit-two{0%,to{transform:translate(112px,-82px)rotate(9deg)}50%{transform:translate(78px,-126px)rotate(-8deg)}}@keyframes orbit-three{0%,to{transform:translateY(112px)rotate(-4deg)}50%{transform:translate(42px,88px)rotate(8deg)}}@keyframes step-pulse{50%{background:#3147a3;transform:translateY(-3px)}}.voice-card,.feedback-card,.queue-item,.swipe-card,.system-canvas,.graph-stage,.empty-mode{background:#fffaf1;border:1px solid #ded6c6;border-radius:8px}.empty-mode{text-align:left;background:linear-gradient(145deg,#fffaf1,#e9f8ff 54%,#ffe0bd);align-content:center;gap:12px;min-height:320px;padding:24px;display:grid;box-shadow:inset 0 1px #ffffffb3,0 14px 30px #1515151c}.voice-card{background:linear-gradient(145deg,#fffaf1,#e9f8ff 54%,#ffe0bd);grid-template-columns:86px 1fr;align-items:center;gap:14px;min-height:176px;padding:14px;display:grid;box-shadow:inset 0 1px #ffffffb3,0 14px 30px #1515151c}.wave-orb{background:#103c2f;border-radius:8px;justify-content:center;align-items:center;gap:5px;min-height:116px;display:flex}.wave-orb i{background:#83e0b4;border-radius:999px;width:7px;height:28px}.wave-orb i:nth-child(2),.wave-orb i:nth-child(4){background:#f0c85a;height:62px}.wave-orb i:nth-child(3){background:#ef6f4d;height:86px}.control-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.control-row.one{grid-template-columns:1fr}.system-message{color:#4a473f;min-height:20px}.queue-list{gap:8px;display:grid}.queue-item{grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px;display:grid;box-shadow:0 8px 18px #15151512}.queue-item span{color:#6c6658;text-transform:uppercase;font-size:.72rem;font-weight:900}.queue-item strong{margin:2px 0;display:block}.swipe-card{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 18% 18%,#ffffffdb,#0000 24%),linear-gradient(145deg,#fffaf1 0%,#dcfff0 44%,#ffd9b0 100%);gap:18px;min-height:clamp(245px,100dvh - 360px,330px);padding:18px;transition:transform .16s;display:grid;position:relative;box-shadow:inset 0 1px #ffffffd1,0 22px #d0bf9c,0 30px 54px #15151533}.swipe-card.success{background:radial-gradient(circle at 20% 18%,#ffffffdb,#0000 24%),linear-gradient(145deg,#f4fff9 0%,#bff3d9 54%,#eaffc6 100%);border-color:#4fb286}.feedback-swipe-card{place-content:stretch}.swipe-card.fail{background:radial-gradient(circle at 20% 18%,#ffffffc2,#0000 24%),linear-gradient(145deg,#fff5f1 0%,#ffc9bd 54%,#ffd6e0 100%);border-color:#ef6f4d}.swipe-card:active{cursor:grabbing}.paper-options{grid-template-columns:1fr 1fr;align-self:end;gap:10px;display:grid}.paper-options div{color:#fff;background:linear-gradient(145deg,#262626,#0d0d0d);border-radius:8px;align-content:space-between;min-height:112px;padding:12px;display:grid}.feedback-card-body{align-content:center;gap:18px;min-height:266px;display:grid}.feedback-card-body p{color:#2c2c2c;max-width:28ch;font-size:1rem}.feedback-card-body>strong{color:#565047;text-transform:uppercase;font-size:.9rem}.result-pill{text-transform:uppercase;border:4px solid;border-radius:12px;justify-self:start;padding:8px 12px;font-size:2rem;font-weight:950;line-height:1;transform:rotate(-8deg)}.result-pill.success{color:#127a43}.result-pill.fail{color:#b83224}.paper-options span{color:#b9ead4;text-transform:uppercase;font-size:.76rem;font-weight:900}.paper-options strong{overflow-wrap:anywhere;font-size:1.05rem;line-height:1.1}.swipe-hint{color:#5f5a4f;text-transform:uppercase;justify-content:space-between;gap:10px;font-size:.85rem;font-weight:900;display:none}.feedback-card{gap:8px;padding:14px;display:grid;box-shadow:0 10px 22px #15151514}.feedback-card.success{background:linear-gradient(135deg,#f6fff9,#dbffe9);border-color:#4fb286}.feedback-card.fail{background:linear-gradient(135deg,#fff8f4,#ffe0d8);border-color:#ef6f4d}.feedback-card.success{color:#0f5130}.feedback-card.fail{color:#8a221a}.feedback-card button{justify-self:start}.podcast-card{color:#fff;background:linear-gradient(135deg,#171717,#27385f);border:1px solid #ded6c6;border-radius:8px;gap:10px;padding:14px;display:grid;box-shadow:0 16px 34px #15151524}.podcast-card .eyebrow{color:#f6d477}.podcast-card p{color:#f4efe5}.podcast-card strong{color:#a8f0ce}.graph-stage{perspective:900px;background:radial-gradient(circle at 25% 20%,#4fb28647,#0000 28%),radial-gradient(circle at 80% 64%,#ef6f4d40,#0000 30%),radial-gradient(circle at 48% 90%,#3c78d847,#0000 32%),#171717;height:clamp(310px,100dvh - 335px,430px);min-height:310px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff24,0 16px 34px #15151526}.graph-stage svg{width:100%;height:100%;position:absolute;inset:0}.graph-stage line{stroke:#fffaf159;stroke-width:2px}.graph-node{color:#151515;overflow-wrap:anywhere;background:linear-gradient(145deg,#fffaf1,#dff7ff);border:2px solid #4fb286;width:78px;min-height:48px;padding:0 6px;font-size:.7rem;line-height:1.05;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 1px #ffffffb3,0 10px 22px #0000003d}.graph-node.active{box-shadow:0 0 0 4px #fffaf147}.graph-node.success{color:#063d23;background:linear-gradient(145deg,#e8fff2,#8ce5ba);border-color:#4fb286!important}.graph-node.fail{color:#64180f;background:linear-gradient(145deg,#fff1ed,#ff9b88);border-color:#ef6f4d!important}.graph-node i{color:#fff;background:#151515;border:2px solid #fffaf1;border-radius:999px;place-items:center;width:24px;height:24px;font-style:normal;line-height:1;display:grid;position:absolute;top:-9px;right:-9px}.component-palette{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.component-palette button{color:#151515;touch-action:none;background:#e8e3d6;padding:0 8px;font-size:.78rem}.component-palette button.dragging,.placed-component.dragging{opacity:.7;transform:scale(.98)}.system-canvas{touch-action:none;background-color:#fffaf1;background-image:linear-gradient(90deg,#1515150f 1px,#0000 1px),linear-gradient(#1515150f 1px,#0000 1px),radial-gradient(circle at 20% 20%,#4fb28630,#0000 24%),radial-gradient(circle at 82% 74%,#ef6f4d2b,#0000 28%),none;background-position:0 0,0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:32px 32px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;height:clamp(310px,100dvh - 345px,430px);min-height:310px;position:relative;overflow:hidden}.system-canvas:before{content:"";background:#4fb286;border-radius:999px;height:3px;position:absolute;top:51%;left:20px;right:20px}.lane-label{color:#6d6659;text-transform:uppercase;font-size:.72rem;font-weight:900;position:absolute;top:12px;left:12px}.lane-label.right{left:auto;right:12px}.placed-component{color:#151515;touch-action:none;background:linear-gradient(145deg,#ffe5b9,#ffa66c);border:2px solid #151515;width:96px;min-height:54px;padding:0 8px;font-size:.78rem;position:absolute;box-shadow:inset 0 1px #ffffff9e,0 9px #c9693f,0 16px 28px #1515152e}.drag-preview{z-index:20;color:#151515;pointer-events:none;background:#f8dfbf;border:2px solid #151515;border-radius:8px;place-items:center;width:96px;min-height:54px;font-size:.78rem;font-weight:900;display:grid;position:fixed;transform:translate(-50%,-50%);box-shadow:0 16px 40px #15151533}.bottom-nav{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffaf1f0;border:1px solid #1515151f;border-radius:8px;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;display:grid;position:absolute;left:12px}.bottom-nav button{color:#5b5a53;background:0 0;border-radius:8px;place-items:center;gap:3px;min-height:52px;padding:0 4px;font-size:.7rem;display:grid}.bottom-nav button span{font-size:1.1rem;line-height:1}.bottom-nav button.active{color:#fff;background:#151515}.xp-bubble{z-index:30;color:#fff;pointer-events:none;min-width:84px;height:48px;transform:translate(var(--from-x), var(--from-y));background:#151515;border:3px solid #fffaf1;border-radius:999px;place-items:center;font-size:1rem;font-weight:950;animation:1.45s cubic-bezier(.2,.8,.2,1) forwards xp-flight;display:grid;position:absolute;top:0;left:0;box-shadow:0 0 0 5px #fffaf14d,0 18px 34px #15151547}.xp-bubble.success{color:#062715;background:linear-gradient(135deg,#28a964,#83e0b4)}.xp-bubble.fail{color:#55120c;background:linear-gradient(135deg,#ef6f4d,#ffb4a5)}@keyframes xp-flight{0%{opacity:0;transform:translate(var(--from-x), var(--from-y)) scale(.65)}14%{opacity:1;transform:translate(calc(var(--from-x) + 12px), calc(var(--from-y) - 58px)) scale(1.18)}48%{opacity:1;transform:translate(calc((var(--from-x) + var(--to-x)) / 2), calc(var(--from-y) - 150px)) scale(1.05)}84%{opacity:1;transform:translate(var(--to-x), var(--to-y)) scale(.92)}to{opacity:0;transform:translate(var(--to-x), var(--to-y)) scale(.25)}}@keyframes progress-pop{50%{transform:scale(1.02)}}@media (width>=700px){body{place-items:center;min-height:100vh;padding:22px;display:grid}.phone-shell{border-radius:28px;height:min(860px,100vh - 44px)}}@media (width<=430px){h1{font-size:1.42rem}h2{font-size:1.02rem}h3{font-size:1.34rem}p{font-size:.86rem}.app-header{padding-left:12px;padding-right:12px}.header-actions{gap:5px}.header-actions span,.round-header>span{padding:6px 8px}.progress-strip{gap:8px;margin:0 12px;padding:8px}.save-bar{padding:10px 12px}.mode-tabs{gap:5px;padding:0 12px 10px}.mode-tabs button{min-height:34px;padding:0 5px;font-size:.72rem}.mode-surface{padding-left:12px;padding-right:12px}.loading-mascot-card{padding:16px}.mascot-image{width:min(90%,290px);max-height:218px}.fetch-orbit{width:56px;height:34px;font-size:.72rem}.swipe-card{gap:14px;padding:14px}.paper-options{gap:8px}.paper-options div{min-height:98px;padding:10px}.paper-options strong{font-size:.92rem}.paper-options span{font-size:.7rem}.feedback-card-body{min-height:220px}.result-pill{font-size:1.55rem}.graph-node{width:70px;min-height:44px;padding:0 5px;font-size:.64rem}.component-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.component-palette button{min-height:40px;padding:0 5px;font-size:.68rem}.placed-component,.drag-preview{width:86px;min-height:50px;font-size:.7rem}.bottom-nav{gap:4px;padding:6px;left:8px;right:8px}.bottom-nav button{min-height:48px;font-size:.64rem}}@media (width<=370px){.voice-card,.queue-item{grid-template-columns:1fr}.wave-orb{min-height:92px}.component-palette{grid-template-columns:repeat(2,1fr)}}