@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&family=Parisienne&display=swap');

:root { --ink:#173b36; --muted:#778681; --paper:#f4f1ea; --canvas:#fffdfa; --line:#ddd9d0; --accent:#e97658; --accent-soft:#fff0e9; --shadow:0 18px 45px rgba(23,59,54,.11); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#e9e6df; font-family:Inter,system-ui,sans-serif; font-size:13px; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
.app-shell { height:100vh; min-width:1040px; display:flex; flex-direction:column; overflow:hidden; }
.topbar { height:68px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:baseline; gap:9px; font:600 20px Fraunces,serif; letter-spacing:-.03em; }.brand small { font:11px Inter,sans-serif; color:var(--muted); letter-spacing:.08em; }.brand-mark { color:var(--accent); font:18px Inter,sans-serif; }
.top-actions,.stage-actions { display:flex; align-items:center; gap:8px; }.save-state { margin-right:10px; color:var(--muted); font:11px 'DM Mono',monospace; }.save-state::before { content:'●'; color:#9bc09a; margin-right:5px; }
.button,.tool-button,.icon-button,.mini-button { border:1px solid var(--line); background:transparent; border-radius:7px; min-height:32px; padding:0 12px; font-size:12px; transition:.18s ease; }.button:hover,.tool-button:hover,.icon-button:hover,.mini-button:hover { border-color:var(--ink); background:#fffaf3; }.button.primary { color:#fff; background:var(--ink); border-color:var(--ink); }.button.primary:hover { background:#28574f; }.button.ghost { background:transparent; }.icon-button { min-width:32px; padding:0; font-size:19px; line-height:1; }.file-button,.upload-button { cursor:pointer; }.file-button input,.upload-button input { display:none; }
.workspace { flex:1; display:grid; grid-template-columns:205px 1fr 264px; min-height:0; }.sidebar { background:var(--paper); min-height:0; }.pages-sidebar { padding:23px 14px 18px 18px; border-right:1px solid var(--line); }.right-sidebar { border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:auto; }.panel { padding:23px 16px 18px; }.asset-panel { border-bottom:1px solid var(--line); }.panel-heading { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; letter-spacing:.02em; }.mini-button { width:25px; min-height:25px; padding:0; font-size:17px; }.page-list { display:flex; flex-direction:column; gap:5px; margin-top:16px; }.page-item { display:flex; align-items:center; gap:9px; padding:11px 10px; border-radius:7px; color:#61716c; cursor:pointer; }.page-item:hover { background:#eae8e0; }.page-item.active { color:var(--ink); background:#fffaf3; box-shadow:inset 3px 0 var(--accent); }.page-item-icon { color:var(--accent); font-size:15px; }.page-item-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; }.page-item .delete-page { opacity:0; color:#b06a57; border:0; background:transparent; padding:2px; }.page-item:hover .delete-page { opacity:1; }.sidebar-tip { margin-top:auto; padding:16px 10px 0; border-top:1px solid var(--line); color:#9b9d95; font-size:11px; line-height:1.7; }
.stage-wrap { min-width:0; display:flex; flex-direction:column; background:#e6e3dc; }.stage-toolbar { min-height:70px; padding:0 25px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #d8d4cc; }.eyebrow { display:block; margin-bottom:4px; color:var(--muted); font:9px 'DM Mono',monospace; letter-spacing:.13em; }.crumb strong { font:500 18px Fraunces,serif; }.zoom-label { min-width:42px; margin-left:11px; color:var(--muted); text-align:center; font:10px 'DM Mono',monospace; }.tool-button { min-height:28px; padding:0 9px; color:#61716c; border-color:#d2cec5; }
.canvas-area { position:relative; flex:1; min-height:0; padding:37px; overflow:auto; display:flex; align-items:center; justify-content:center; cursor:grab; background-image:radial-gradient(#c9c6bd .8px, transparent .8px); background-size:16px 16px; }.canvas-area.panning { cursor:grabbing; }.canvas-board { position:relative; width:900px; height:640px; flex:none; overflow:hidden; transform-origin:center; background:var(--canvas); box-shadow:var(--shadow); background-image:linear-gradient(135deg,rgba(255,255,255,.7),rgba(249,245,236,.35)); }.canvas-board.drag-over { outline:2px dashed var(--accent); outline-offset:6px; }.canvas-item { position:absolute; transform-origin:center; user-select:none; cursor:grab; }.canvas-item:active { cursor:grabbing; }.canvas-item img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }.canvas-item.canvas-background img { object-fit:cover; }.canvas-item.selected { outline:1px solid var(--accent); outline-offset:4px; }.canvas-item.selected::before { content:''; position:absolute; inset:-5px; border:1px dashed rgba(233,118,88,.65); pointer-events:none; }.resize-handle { position:absolute; right:-8px; bottom:-8px; width:15px; height:15px; background:var(--canvas); border:2px solid var(--accent); border-radius:50%; cursor:nwse-resize; }.rotate-handle { position:absolute; left:50%; top:-32px; width:1px; height:25px; background:var(--accent); }.rotate-handle::after { content:'↻'; position:absolute; top:-13px; left:-8px; width:17px; height:17px; color:var(--accent); background:var(--canvas); border-radius:50%; font-size:15px; line-height:17px; }.statusbar { height:30px; padding:0 25px; display:flex; justify-content:space-between; align-items:center; color:#96988f; font-size:10px; border-top:1px solid #d8d4cc; }.statusbar span:last-child { font-family:'DM Mono',monospace; }
.panel-note { margin:9px 0 15px; color:#9b9d95; font-size:10px; }.upload-button { border:1px solid var(--ink); border-radius:6px; padding:6px 8px; font-size:10px; font-weight:500; }.asset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.asset-card { aspect-ratio:1; position:relative; padding:6px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#ece9e1; cursor:pointer; }.asset-card:hover { border-color:var(--accent); transform:translateY(-1px); }.asset-card img { width:100%; height:100%; object-fit:contain; }.asset-card small { position:absolute; left:4px; right:4px; bottom:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#6b716c; background:rgba(255,253,250,.85); font-size:8px; }.empty { color:#9b9d95; font-size:11px; text-align:center; padding:18px 4px; grid-column:1/-1; }.layers-panel { flex:1; min-height:160px; overflow:auto; }.layer-count { color:#a0a49f; font:10px 'DM Mono',monospace; }.layer-list { display:flex; flex-direction:column; gap:5px; margin-top:13px; }.layer-row { display:flex; align-items:center; gap:6px; padding:7px 5px; border-radius:5px; }.layer-row:hover,.layer-row.active { background:#fffaf3; }.layer-drag { color:#a8aba3; font-size:15px; cursor:grab; }.layer-thumb { width:28px; height:28px; padding:3px; display:grid; place-items:center; background:#ebe8df; border-radius:4px; }.layer-thumb img { max-width:100%; max-height:100%; }.layer-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.layer-action { padding:2px; color:#9b9d95; border:0; background:transparent; font-size:13px; }.layer-action.active,.layer-action:hover { color:var(--accent); }.hidden-layer { opacity:.45; }.locked-layer .layer-name::after { content:' · locked'; color:#a6a79f; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(23,59,54,.55); }.modal-backdrop.hidden { display:none; }.preview-modal { position:relative; width:100vw; height:100vh; display:grid; place-items:center; padding:24px; background:var(--paper); }.preview-board { width:min(100%,126.56vh); aspect-ratio:900/640; position:relative; overflow:hidden; background:var(--canvas); box-shadow:0 10px 35px rgba(0,0,0,.18); }.preview-board .canvas-item { pointer-events:none; }.preview-modal p { position:absolute; left:24px; bottom:16px; margin:0; color:var(--muted); font:10px 'DM Mono',monospace; }.page-dialog { width:min(360px,calc(100vw - 40px)); position:relative; padding:24px; background:var(--paper); box-shadow:var(--shadow); }.dialog-heading { margin-bottom:18px; font:500 18px Fraunces,serif; }.page-dialog input { width:100%; height:38px; padding:0 11px; color:var(--ink); border:1px solid var(--line); border-radius:6px; outline:none; background:#fffdfa; }.page-dialog input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }.close-button { position:absolute; right:10px; top:7px; z-index:1; border:0; background:transparent; color:var(--muted); font-size:24px; }.toast { position:fixed; left:50%; bottom:28px; z-index:20; padding:9px 14px; color:#fff; background:var(--ink); border-radius:5px; opacity:0; transform:translate(-50%,8px); transition:.2s; font-size:11px; pointer-events:none; }.toast.show { opacity:0; transform:translate(-50%,8px); transition:.2s; font-size:11px; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1100px) { .workspace { grid-template-columns:180px 1fr 235px; }.canvas-area { padding:25px; }.topbar { padding:0 16px; }.top-actions .file-button { display:none; } }
.context-menu { position:fixed; z-index:30; min-width:112px; padding:4px; background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 22px rgba(23,59,54,.18); }.context-menu.hidden { display:none; }.context-menu button { width:100%; padding:8px 10px; color:var(--ink); text-align:left; border:0; border-radius:4px; background:transparent; font-size:12px; }.context-menu button:hover:not(:disabled) { color:#fff; background:var(--accent); }.context-menu button:disabled { color:#aaa; cursor:not-allowed; }
.right-sidebar { overflow:hidden; }.asset-panel { flex:0 0 390px; overflow:auto; }.panel-divider { flex:0 0 7px; cursor:row-resize; background:var(--line); }.panel-divider:hover { background:var(--accent); }.resizing-panel { cursor:row-resize; user-select:none; }

.portfolio-word { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#61745c; font-family:Fraunces, Georgia, serif; font-weight:600; white-space:nowrap; }
.portfolio-letter { --portfolio-push:0px; --portfolio-lift:0px; --portfolio-scale:1; --portfolio-rotate:0deg; position:relative; display:inline-block; transform:translate3d(var(--portfolio-push),var(--portfolio-lift),0) rotate(var(--portfolio-rotate)) scale(var(--portfolio-scale)); transform-origin:center bottom; transition:transform 260ms cubic-bezier(.16,1,.3,1), color 220ms ease; }
.portfolio-letter-text { display:inline-block; transition:opacity 180ms ease; }
.portfolio-letter-image { position:absolute; left:50%; bottom:-.08em; width:1.3em; height:1.3em; object-fit:contain; opacity:0; filter:drop-shadow(0 7px 5px rgba(23,59,54,.28)) saturate(1.12); transform:translate(-50%,8px) scale(.72) rotate(3deg); transition:opacity 180ms ease, transform 260ms cubic-bezier(.16,1,.3,1); pointer-events:none; }
.portfolio-letter.active { --portfolio-lift:-10px; --portfolio-scale:1.16; --portfolio-rotate:-2deg; color:#e97658; }
.portfolio-letter.active .portfolio-letter-text { opacity:0; }
.portfolio-letter.active .portfolio-letter-image { opacity:1; transform:translate(-50%,-.06em) scale(1.08) rotate(-4deg); }
.portfolio-static { gap:0; font-size:118px; letter-spacing:.01em; font-family:Parisienne,'Snell Roundhand',cursive; font-weight:400; color:#617b5a; text-shadow:0 2px 0 rgba(255,252,232,.72),0 6px 13px rgba(23,59,54,.1); }
.asset-card .portfolio-word { min-height:100%; font-size:20px; letter-spacing:-.08em; pointer-events:none; }
.layer-thumb .portfolio-word { font-size:13px; letter-spacing:-.08em; }
.portfolio-static .portfolio-letter:nth-child(1) { --portfolio-lift:5px; --portfolio-rotate:-4deg; }
.portfolio-static .portfolio-letter:nth-child(2) { --portfolio-lift:-2px; --portfolio-rotate:-1deg; }
.portfolio-static .portfolio-letter:nth-child(3) { --portfolio-lift:4px; --portfolio-rotate:2deg; }
.portfolio-static .portfolio-letter:nth-child(4) { --portfolio-lift:-5px; --portfolio-rotate:3deg; }
.portfolio-static .portfolio-letter:nth-child(5) { --portfolio-lift:2px; --portfolio-rotate:-2deg; color:#80936c; }
.portfolio-static .portfolio-letter:nth-child(6) { --portfolio-lift:-3px; --portfolio-rotate:1deg; }
.portfolio-static .portfolio-letter:nth-child(7) { --portfolio-lift:5px; --portfolio-rotate:-3deg; }
.portfolio-static .portfolio-letter:nth-child(8) { --portfolio-lift:-1px; --portfolio-rotate:-1deg; }
.portfolio-static .portfolio-letter:nth-child(9) { --portfolio-lift:4px; --portfolio-rotate:3deg; }
.preview-board .portfolio-interactive { pointer-events:auto; cursor:default; font-size:clamp(64px,12vw,146px); letter-spacing:-.07em; touch-action:none; }
.preview-board .portfolio-interactive { position:relative; color:#617b5a; font-family:Parisienne,'Snell Roundhand',cursive; font-weight:400; letter-spacing:.01em; text-shadow:0 2px 0 rgba(255,252,232,.72),0 6px 13px rgba(23,59,54,.1); }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(1) { --portfolio-lift:5px; --portfolio-rotate:-4deg; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(2) { --portfolio-lift:-2px; --portfolio-rotate:-1deg; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(3) { --portfolio-lift:4px; --portfolio-rotate:2deg; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(4) { --portfolio-lift:-5px; --portfolio-rotate:3deg; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(5) { --portfolio-lift:2px; --portfolio-rotate:-2deg; color:#80936c; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(6) { --portfolio-lift:-3px; --portfolio-rotate:1deg; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(7) { --portfolio-lift:5px; --portfolio-rotate:-3deg; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(8) { --portfolio-lift:-1px; --portfolio-rotate:-1deg; }
.preview-board .portfolio-interactive .portfolio-letter:nth-child(9) { --portfolio-lift:4px; --portfolio-rotate:3deg; }
.preview-board .portfolio-interactive .portfolio-letter { pointer-events:none; }
.interactive-scene { position:absolute; inset:0; }
.preview-board .interactive-hit { pointer-events:auto; }
.interactive-hit { pointer-events:auto; cursor:pointer; }
.interactive-hit:hover { filter:drop-shadow(0 8px 8px rgba(23,59,54,.2)); }
.macaron-group { position:absolute; z-index:2; background:transparent; cursor:pointer; }
.scene-title { position:absolute; left:8%; right:8%; top:8%; color:var(--ink); text-align:center; font:500 clamp(20px,4vw,42px) Fraunces,serif; pointer-events:none; }
.scene-hint { position:absolute; left:8%; right:8%; bottom:6%; color:var(--muted); text-align:center; font:10px 'DM Mono',monospace; pointer-events:none; }
.scene-cup { position:absolute; width:15%; height:24%; padding:1%; border:0; border-radius:50%; background:rgba(255,253,250,.22); }
.scene-cup img,.scene-macaron img,.scene-teapot img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.scene-teapot { position:absolute; left:37%; top:18%; width:26%; height:28%; padding:0; border:0; background:transparent; }
.scene-macaron { position:absolute; width:24%; height:24%; padding:2%; border:0; border-radius:50%; background:rgba(255,253,250,.2); }
.scene-stream { position:absolute; width:6%; min-width:18px; height:26%; left:57%; top:39%; overflow:visible; transform-origin:10% 0; opacity:0; pointer-events:none; will-change:transform,opacity; }
.scene-stream path { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:9 6; }
.scene-stream-main { stroke:rgba(92,119,57,.96); stroke-width:12; filter:drop-shadow(0 0 2px rgba(52,74,34,.35)); }
.scene-stream-highlight { stroke:rgba(220,231,157,.86); stroke-width:4; stroke-dasharray:5 10; }
.interactive-hit[data-preview-action="cup"] { overflow:hidden; }
.cup-fill { position:absolute; left:30.8%; bottom:36%; width:38.4%; height:0; border-radius:50%; background:linear-gradient(180deg,#a9c27a,#607d3d); box-shadow:inset 0 2px 2px rgba(239,247,191,.6),0 1px 3px rgba(48,69,27,.28); opacity:.9; pointer-events:none; clip-path:ellipse(50% 30% at 50% 50%); }
.scene-detail { position:absolute; inset:15%; display:grid; place-items:center; color:var(--ink); text-align:center; }
.scene-detail h2 { margin:0 0 12px; font:500 clamp(26px,5vw,52px) Fraunces,serif; }
.scene-detail p { margin:0; color:var(--muted); font:11px 'DM Mono',monospace; }
.preview-board [data-preview-role="teapot"] { will-change:transform; }
.preview-board [data-preview-role="cup"] { pointer-events:auto; will-change:transform; transform-origin:50% 85%; }
.preview-board [data-preview-role="macaron-fork"],.preview-board [data-preview-role="macaron-target"] { will-change:transform; }
.preview-board [data-preview-role="tea-surface"],.preview-board [data-preview-role="tea-stream"] { will-change:transform,opacity; pointer-events:none; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-letter { transition:none; }
  .interactive-hit { transition:none; }
}
.preview-transition-mask { position:absolute; left:50%; top:50%; z-index:2; width:160%; aspect-ratio:1; border-radius:50%; background:rgba(197,211,164,.96); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(0); }