@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap";:root{color-scheme:light;font-family:DM Sans,sans-serif;--bg: #f3e3cb;--surface: rgba(255, 252, 245, .6);--surface-hover: rgba(255, 252, 245, .8);--border: rgba(0, 0, 0, .06);--border-active: rgba(0, 0, 0, .12);--ink: #1a120b;--ink-secondary: rgba(26, 18, 11, .55);--ink-tertiary: rgba(26, 18, 11, .35);--accent: #5a8f7b;--accent-hover: #6ba48e;--accent-glow: rgba(90, 143, 123, .12);--accent-text: #4a7d6a;--flap-width: clamp(13px, 2.4vw, 34px)}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.45),transparent 18%),radial-gradient(circle at 85% 8%,rgba(248,174,106,.18),transparent 26%),linear-gradient(180deg,#f3e3cb,#dcc5a8);background-attachment:fixed;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea{font:inherit}button{border:0}a{color:inherit}h1,h2,h3{font-family:Fraunces,serif;font-weight:600;letter-spacing:-.03em;margin:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeInUp .7s cubic-bezier(.22,1,.36,1) both}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.gradient-text{background:linear-gradient(135deg,#5a8f7b,#8abba8,#4a7d6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-shell{position:relative;min-height:100vh;padding:calc(20px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left))}.app-shell.is-present{padding:0}.app-shell>main{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:48px}.site-nav{max-width:1120px;margin:0 auto 48px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand-lockup{display:inline-flex;align-items:center;gap:10px}.brand-lockup strong{font-size:1rem;color:var(--ink)}.brand-mark{width:2.2rem;height:2.2rem;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1d1d1c,#111110);color:#fff8ef;font-family:Barlow Condensed,sans-serif;font-size:.88rem;font-weight:700;letter-spacing:.06em;border:1px solid rgba(255,255,255,.06)}.nav-actions{display:inline-flex;align-items:center;gap:6px}.nav-link{padding:8px 14px;border-radius:10px;background:transparent;border:none;color:var(--ink-secondary);font-size:.86rem;cursor:pointer;transition:color .15s ease}.nav-link:hover{color:var(--ink)}.primary-button,.present-exit-button{padding:10px 18px;border-radius:12px;background:linear-gradient(180deg,var(--accent-hover),var(--accent));color:#fff;font-weight:600;font-size:.86rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 8px #5a8f7b40;transition:all .15s ease}.primary-button:hover,.present-exit-button:hover{background:linear-gradient(180deg,#7db8a3,var(--accent));box-shadow:0 4px 16px #5a8f7b59;transform:translateY(-1px)}.primary-button.compact{padding:8px 14px}.ghost-button{padding:8px 14px;border-radius:10px;background:#fffcf580;border:1px solid var(--border);color:var(--ink-secondary);font-size:.84rem;cursor:pointer;box-shadow:0 1px 4px #00000008;transition:all .15s ease}.ghost-button:hover{background:#fffcf5bf;color:var(--ink);box-shadow:0 2px 8px #0000000f}.glass-button{padding:10px 16px;border-radius:12px;background:#ffffffa6;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(0,0,0,.06);color:var(--ink-secondary);font-size:.84rem;cursor:pointer;transition:all .15s ease}.glass-button:hover{background:#fffc;color:var(--ink)}.mini-btn{padding:6px 12px;border-radius:8px;background:#0000000a;border:1px solid var(--border);color:var(--ink-secondary);font-size:.8rem;cursor:pointer;transition:all .15s ease}.mini-btn:hover{background:#00000012;color:var(--ink)}.mini-btn.destructive{color:#ff8c6e}.mini-btn.destructive:hover{background:#ff50321a;border-color:#ff503233}.hero{text-align:center;padding:16px 0 0}.hero-eyebrow{margin:0 0 16px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);font-weight:600}.hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.95;color:var(--ink)}.hero-subtitle{margin:20px 0 0;color:var(--ink-secondary);font-size:1.08rem;line-height:1.6}.board-section,.board-stage-shell{position:relative}.board-stage-shell.is-present{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at top,rgba(255,255,255,.25),transparent 28%),linear-gradient(180deg,#f3e3cb,#dcc5a8)}.board-stage-wall,.board-stage-overlay{display:none}.board-stage-shell.is-present .board-stage-wall,.board-stage-shell.is-present .board-stage-overlay{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.board-stage-shell.is-present .board-stage-wall{z-index:0}.board-stage-shell.is-present .board-stage-overlay{z-index:1}.board-stage-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;max-width:100%;box-sizing:border-box;padding:0 12px}.board-stage-shell.is-present .board-stage-content{padding:0 16px}.vb-frame{border-radius:18px;max-width:100%;overflow:hidden}.frame-black{background:linear-gradient(180deg,#1b1b1a,#0e0e0d);padding:14px;box-shadow:0 28px 70px #00000059,inset 0 1px #ffffff0a}.vb-board-body{background:linear-gradient(180deg,#1d1d1d,#181818);border-radius:12px;padding:clamp(9px,1.8vw,16px);box-shadow:inset 0 1px #ffffff08,inset 0 -8px 18px #00000038}.vb-board{display:flex;flex-direction:column;gap:4px;-webkit-user-select:none;user-select:none}.vb-row{display:flex;gap:3px}.flap-unit{position:relative;width:var(--flap-width);height:calc(var(--flap-width) * 1.3);perspective:240px;flex-shrink:0;cursor:text;outline:none}.flap-unit.is-in-range:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:4px;background:#5a8f7b26;border:1.5px solid rgba(90,143,123,.5);pointer-events:none}.flap-unit.is-selected:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:6px;border:2px solid rgba(90,143,123,.9);box-shadow:0 0 0 2px #5a8f7b40;pointer-events:none;animation:selectedPulse 2s ease-in-out infinite}@keyframes selectedPulse{0%,to{box-shadow:0 0 0 2px #5a8f7b40}50%{box-shadow:0 0 0 4px #5a8f7b1f}}.flap-unit:focus-visible:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:6px;border:1.5px solid rgba(255,248,239,.85);box-shadow:0 0 0 4px #fff8ef1f;pointer-events:none}.flap-box{position:relative;width:100%;height:100%}.flap{position:absolute;width:100%;height:50%;overflow:hidden;backface-visibility:hidden}.fc{position:absolute;width:100%;text-align:center;font-family:Barlow Condensed,Arial Narrow,sans-serif;font-weight:700;font-size:calc(var(--flap-width) * .79);line-height:calc(var(--flap-width) * 1.3);letter-spacing:-.018em;color:#f0ece4;-webkit-user-select:none;user-select:none;text-shadow:0 1px 1px rgba(0,0,0,.35);transform:translateY(-.02em);font-variant-numeric:tabular-nums lining-nums}.tc{top:0}.bc{top:calc(var(--flap-width) * -.65)}.bottom-new{top:50%;background:linear-gradient(180deg,#242423,#292928);border-radius:0 0 3px 3px;z-index:1}.top-static{top:0;background:linear-gradient(180deg,#2d2d2c,#272726);border-radius:3px 3px 0 0;z-index:2}.bottom-old{top:50%;background:linear-gradient(180deg,#242423,#292928);border-radius:0 0 3px 3px;z-index:3}.top-flip{top:0;background:linear-gradient(180deg,#2d2d2c,#272726);border-radius:3px 3px 0 0;transform-origin:bottom center;z-index:5}.bottom-flip{top:50%;background:linear-gradient(180deg,#242423,#292928);border-radius:0 0 3px 3px;transform-origin:top center;transform:rotateX(90deg);z-index:4}.flipping .top-flip{animation:flip-top var(--flip-dur, .15s) cubic-bezier(.45,.05,.55,.95) forwards}.flipping .bottom-flip{animation:flip-bottom var(--flip-dur, .15s) cubic-bezier(.2,0,.4,1) var(--flip-bot-delay, 45ms) forwards}.flipping .bottom-old{animation:hide-old var(--flip-dur, .15s) ease-in forwards}.flap-box:after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#000000eb;z-index:10;pointer-events:none;transform:translateY(-.5px)}.flap-box:before{content:"";position:absolute;top:calc(50% + 1px);left:0;right:0;height:2px;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent);z-index:9;pointer-events:none}@keyframes flip-top{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-bottom{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes hide-old{0%,30%{opacity:1}45%,to{opacity:0}}.present-toolbar{position:absolute;top:calc(18px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));z-index:4;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.present-exit-dock{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:4;display:inline-flex;align-items:center;gap:12px;padding:8px 16px;border-radius:999px;background:#0b0b0bcc;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.present-exit-dock span{color:#fff8ef80;font-size:.8rem;white-space:nowrap}.toolbar{margin-top:-24px}.toolbar-inner{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 2px 12px #0000000a;flex-wrap:wrap;color:var(--ink)}.toolbar-group{display:inline-flex;align-items:center;gap:4px}.save-group{flex:1;min-width:180px;max-width:300px;gap:6px}.toolbar-sep{display:inline-block;width:1px;height:18px;background:var(--border);margin:0 4px}.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px;border-radius:10px;background:transparent;border:none;color:var(--ink-tertiary);font-size:.78rem;cursor:pointer;transition:all .15s ease;white-space:nowrap}.tool-btn:hover{background:#0000000d;color:var(--ink-secondary)}.tool-btn.active{color:var(--accent)}.tool-btn.disabled,.tool-btn:disabled{opacity:.3;cursor:default;pointer-events:none}.toolbar-input{flex:1;min-width:0;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#fffcf599;color:var(--ink);font-size:.84rem;outline:none;transition:border-color .15s ease}.toolbar-input::placeholder{color:var(--ink-tertiary)}.toolbar-input:focus{border-color:#5a8f7b80}.message-mode-panel{max-width:540px;margin:0 auto;padding:0 20px}.message-mode-inner{padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 12px #0000000a}.message-mode-label{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-tertiary);margin-bottom:8px;font-weight:600}.message-mode-textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fffcf599;color:var(--ink);font-family:SF Mono,Fira Code,Fira Mono,monospace;font-size:.88rem;line-height:1.5;resize:none;outline:none;transition:border-color .15s ease;box-sizing:border-box}.message-mode-textarea::placeholder{color:var(--ink-tertiary)}.message-mode-textarea:focus{border-color:#5a8f7b80}.message-mode-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.section-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-tertiary);margin-bottom:14px;font-weight:600}.scenes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.scene-card{text-align:left;padding:0;border-radius:12px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all .2s ease;overflow:hidden}.scene-card:hover{border-color:#5a8f7b66;transform:translateY(-1px);box-shadow:0 4px 16px #0000000f}.scene-card-preview{padding:8px 8px 6px;background:#1a1a1a}.scene-card-preview .mini-board{margin-top:0;padding:4px;border-radius:4px}.scene-card-info{padding:8px 10px}.scene-card-info strong{display:block;color:var(--ink);font-size:.78rem;font-weight:600}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{padding:28px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 1px 6px #0000000a;color:var(--ink);transition:all .25s cubic-bezier(.22,1,.36,1)}.feature-card:hover{transform:translateY(-3px);background:var(--surface-hover);box-shadow:0 10px 28px #00000012}.feature-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-glow);border:1px solid rgba(90,143,123,.18);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:18px}.feature-card h3{font-size:1.2rem;margin-bottom:8px;line-height:1.15;color:var(--ink)}.feature-card p{margin:0;color:var(--ink-secondary);font-size:.88rem;line-height:1.55}.saved-section{padding:32px;border-radius:24px;background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 1px 6px #0000000a;color:var(--ink)}.saved-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.saved-header h2{font-size:clamp(1.6rem,3vw,2.2rem)}.saved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.saved-card{padding:16px;border-radius:14px;background:#fffcf580;border:1px solid var(--border);box-shadow:0 1px 4px #00000008;transition:all .2s ease}.saved-card:hover{background:#fffcf5bf;transform:translateY(-1px);box-shadow:0 4px 14px #0000000f}.saved-card-clickable{cursor:pointer}.saved-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.saved-card-head strong{display:block;color:var(--ink);font-size:.9rem}.saved-card-head>div:first-child>span{display:block;margin-top:2px;color:var(--ink-tertiary);font-size:.78rem}.saved-card-actions{display:flex;gap:6px}.mini-board{margin-top:12px;padding:6px;border-radius:8px;background:linear-gradient(180deg,#1d1d1d,#171717);box-shadow:inset 0 1px #ffffff08}.mini-board-row{display:flex;gap:1px}.mini-board-row+.mini-board-row{margin-top:1px}.mini-board-cell{flex:1;aspect-ratio:1 / 1.25;background:#2a2a29;border-radius:1px;font-family:Barlow Condensed,sans-serif;font-size:.42rem;font-weight:700;color:#d8d4cc;display:flex;align-items:center;justify-content:center;line-height:1;overflow:hidden}.empty-state{padding:40px;border-radius:14px;background:#ffffff4d;border:1px dashed rgba(0,0,0,.1);text-align:center}.empty-state p{margin:0;color:var(--ink-tertiary);font-size:.9rem;line-height:1.5}.site-footer{max-width:1120px;margin:24px auto 0;padding:28px 0 0;border-top:1px solid rgba(0,0,0,.08)}.footer-inner{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.8rem}.footer-brand{color:var(--ink-secondary);font-weight:600}.footer-sep,.footer-text{color:var(--ink-tertiary)}.composer-panel{margin-top:-24px;animation:fadeInUp .25s cubic-bezier(.22,1,.36,1)}.composer-panel-inner{position:relative;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 2px 12px #0000000a}.qwerty-keyboard{display:flex;flex-direction:column;gap:4px;align-items:center}.qwerty-row{display:flex;gap:4px;justify-content:center}.composer-close{position:absolute;top:12px;right:12px;width:2rem;height:2rem;padding:0;border-radius:8px;background:transparent;border:none;color:var(--ink-tertiary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.composer-close:hover{background:#0000000d;color:var(--ink-secondary)}.eyebrow{margin:0 0 6px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-tertiary);font-weight:600}.composer-section+.composer-section{margin-top:14px}.composer-section-title{margin-bottom:8px}.composer-section-title span{color:#fff8ef59;font-size:.82rem}.palette-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}.palette-grid.compact{grid-template-columns:repeat(11,minmax(0,1fr))}.palette-chip{min-height:2.2rem;display:inline-flex;align-items:center;justify-content:center;font-family:Barlow Condensed,sans-serif;font-size:.92rem;letter-spacing:.03em;padding:4px;border-radius:7px;background:#fffcf5b3;border:1px solid var(--border);color:var(--ink);cursor:pointer;transition:all .1s ease}.palette-chip:hover{background:#ffffffe6;box-shadow:0 1px 4px #00000014}.palette-chip.active{background:#5a8f7b2e;border-color:#5a8f7b66}.color-palette{display:flex;flex-wrap:wrap;gap:6px}.color-picker{width:2.4rem;height:2.4rem;padding:0;border-radius:10px;color:#ffffffe6;font-family:Barlow Condensed,sans-serif;font-size:.88rem;font-weight:700;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:all .1s ease}.color-picker:hover{transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.color-picker.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:50;padding:10px 18px;border-radius:999px;background:#ffffffd9;border:1px solid var(--border);box-shadow:0 8px 24px #0000001a;color:var(--ink);font-size:.84rem;animation:toastIn .3s cubic-bezier(.22,1,.36,1)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 900px){.app-shell>main{gap:36px}.scenes-grid{grid-template-columns:repeat(2,1fr)}.features-grid,.saved-grid{grid-template-columns:1fr}.toolbar-inner{flex-direction:column;gap:10px}.toolbar-group{width:100%;justify-content:center}.save-group{max-width:none}.palette-grid{grid-template-columns:repeat(9,minmax(0,1fr))}.palette-grid.compact{grid-template-columns:repeat(8,minmax(0,1fr))}}@media (max-width: 640px){:root{--flap-width: clamp(10px, 4vw, 24px)}.app-shell{padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}.app-shell>main{gap:28px}.site-nav{margin-bottom:28px}.hero{text-align:left}.board-stage-shell{border-radius:18px}.saved-section{padding:20px;border-radius:18px}.saved-header{flex-direction:column;align-items:flex-start}.scenes-grid{grid-template-columns:1fr}.saved-card-head{flex-direction:column}.present-toolbar{left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right))}.present-exit-dock{width:calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));justify-content:center}.present-exit-dock span{display:none}.palette-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.palette-grid.compact{grid-template-columns:repeat(6,minmax(0,1fr))}.feature-card{padding:22px 20px;border-radius:16px}}