:root{--bg-cream:#FBF8F3;--bg-card:#FFFFFF;--ink:#1A1A1F;--ink-soft:#6B6B73;--ink-faint:#B0AEAD;--accent:#FF6B5B;--accent-soft:#FFE8E4;--mint:#A8E0C9;--lavender:#D9D4F0;--lavender-deep:#8B80C8;--line:#ECE7DD;--voice:#F0EDFF;--shadow:0 1px 3px -1px rgba(30,20,10,0.05);--card-border:rgba(26,20,10,0.07);--divider:rgba(26,20,10,0.05);--font:"Geist",system-ui,-apple-system,sans-serif;--serif:"Fraunces",Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:#efeae2;color:#2a241c;min-height:100vh}
a{color:var(--accent)}a:hover{color:#E05545}
.board{padding:36px 28px 64px;max-width:1200px;margin:0 auto}
.board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.board-head h1{font-family:var(--serif);font-weight:400;font-size:32px;letter-spacing:-0.03em;margin:0 0 6px}
.board-head p{margin:0;max-width:640px;font-size:14px;line-height:1.5;color:#6b645c}
.replay-all{border:1px solid rgba(26,20,10,0.08);background:rgba(255,255,255,0.7);font:inherit;font-size:12px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;color:inherit;display:inline-flex;gap:6px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(3,340px);gap:24px}
.frame{margin:0}
.frame figcaption{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:#8a8278;margin:0 0 10px 4px}
.frame figcaption button{border:0;background:transparent;color:#8a8278;cursor:pointer;padding:4px;display:inline-flex}
.frame figcaption button .hgi{font-size:14px}
.tile{width:340px;height:340px;border-radius:24px;background:var(--bg-cream);position:relative;overflow:hidden}
.noise{display:none}
.rainbow{display:none}
.ui{position:relative;z-index:1;padding:18px 18px 0;display:flex;flex-direction:column;gap:12px;height:334px}
.composer{display:flex;align-items:flex-start;min-height:44px;border-radius:22px;background:var(--bg-card);border:1px solid var(--line);padding:4px 6px 4px 16px;position:relative;flex-shrink:0}
.composer-placeholder{flex:1;min-width:0;font-size:13.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:34px}
.typed{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:var(--ink);padding:7px 8px 7px 0;display:none}
.typed::after{content:"";display:inline-block;width:1.5px;height:14px;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rec{flex:1;display:none;align-items:center;gap:10px;min-width:0;height:34px}
.rec .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:pulse 1s ease-in-out infinite}
.rec-label{flex:1;font-size:13.5px;color:var(--ink);white-space:nowrap}
@keyframes pulse{50%{opacity:0.35}}
.composer-rule{width:1px;height:22px;background:var(--line);margin:6px 4px 0 0;flex-shrink:0}
.round-btn{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;padding:0}
.round-btn.stop{background:var(--accent);color:#fff}
.keyhint{position:absolute;right:20px;top:66px;display:flex;gap:4px;visibility:hidden;z-index:3}
.key{padding:2px 6px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:11px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,0.06)}
.feed{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
.note{background:var(--bg-card);border-radius:14px;padding:11px 12px 9px;border:1px solid var(--card-border);box-shadow:var(--shadow);margin-bottom:8px;overflow:hidden;position:relative;flex-shrink:0}
.note.pinned{background:var(--accent-soft)}
.note p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.note-rule{width:90%;height:1px;margin:8px auto;background:var(--divider)}
.note-meta{display:flex;align-items:center;gap:4px;min-height:24px}
.time{font-size:10.5px;color:var(--ink-faint)}
.pin-tag{font-size:9px;font-weight:600;letter-spacing:0.04em;color:var(--accent);margin-left:auto;visibility:hidden}
.meta-btn{width:20px;height:20px;border:0;background:transparent;color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;padding:0}
.voice{display:flex;align-items:center;gap:8px;background:var(--voice);border-radius:999px;padding:6px 12px 6px 6px}
.play{width:28px;height:28px;border-radius:50%;background:var(--accent);border:0;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.play.lg{width:36px;height:36px}
.bars{flex:1;display:flex;align-items:center;gap:2px;height:18px;min-width:0}
.bars span{width:2px;border-radius:2px;background:var(--lavender-deep);display:block;height:6px}
.rec .bars span{background:var(--accent)}
.dur{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink-soft);flex-shrink:0}
.transcript{margin:6px 0 0;font-size:12px;color:var(--ink-soft);font-style:italic;line-height:1.5;min-height:18px}
.image-note{border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#ffe8e4,#d9d4f0 55%,#a8e0c9);height:110px}
.image-caption{margin:6px 0 0;font-size:13px;color:var(--ink)}
.video-note{position:relative;border-radius:12px;overflow:hidden;height:150px;background:#2a2622 url("video-thumb.jpg") center 40%/cover no-repeat}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:0.04em;color:var(--lavender-deep)}
.video-note .ph{bottom:40px}
.video-note .play.lg{position:absolute;left:12px;bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,0.12)}
.video-ctrl{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:8px}
.video-vol{display:flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 8px;border-radius:999px;background:rgba(20,20,24,0.55);color:#fff}
.video-vol .hgi{font-size:14px}
.video-vol i.track{width:70px;height:16px;border-radius:999px;background:var(--accent);position:relative}
.video-vol i.track::after{content:"";position:absolute;right:2px;top:2px;width:22px;height:12px;border-radius:999px;background:#fff}
.video-time{height:28px;padding:0 10px;border-radius:8px;background:rgba(20,20,24,0.55);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;display:flex;align-items:center}
.checklist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.checklist li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--lavender-deep);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.check .hgi{font-size:11px;opacity:0;transform:scale(0.4)}
.check.on{background:var(--accent);border-color:var(--accent)}
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.lbl{position:relative;--p:0}
.lbl::after{content:"";position:absolute;left:0;top:52%;height:1.5px;width:calc(var(--p)*100%);background:var(--ink-soft)}
.cam{position:absolute;left:0;right:0;top:0;z-index:4;border-radius:14px;overflow:hidden;height:190px;background:#2a2622 url("video-thumb.jpg") center 40%/cover no-repeat;box-shadow:0 4px 12px -6px rgba(30,20,10,0.15);visibility:hidden}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.cam .recbadge{z-index:2}
.cam .count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:72px;color:var(--ink);visibility:hidden}
.cam .recbadge{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(20,20,24,0.55);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;visibility:hidden}
.cam .recbadge i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1s ease-in-out infinite}
.cam .stopbtn{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.2)}
.cam .stopbtn i{width:16px;height:16px;border-radius:3px;background:var(--accent)}
.file-chip{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;background:#fff;box-shadow:0 10px 30px -10px rgba(30,20,10,0.4);font-size:12px;font-weight:500;color:var(--ink);visibility:hidden}
.file-chip i{width:34px;height:34px;border-radius:8px;background:linear-gradient(145deg,#ffe8e4,#d9d4f0 55%,#a8e0c9)}
.cursor{position:absolute;z-index:20;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(26,26,31,0.22);border:1.5px solid rgba(26,26,31,0.6);pointer-events:none;visibility:hidden}
.detail{position:relative;z-index:1;height:334px;display:flex;flex-direction:column}
.detail-body{flex:1;min-height:0;overflow:hidden;background:transparent;padding:18px 18px 12px;position:relative}
.detail-body h2{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-0.02em;margin:0 0 8px;color:var(--ink)}
.detail-body p{margin:0 0 10px;font-size:14px;line-height:1.7;letter-spacing:-0.01em;color:var(--ink)}
.summary{position:absolute;left:18px;right:18px;top:56px;visibility:hidden}
.summary ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:var(--ink)}
.summary .ai-tag{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:0.04em;color:var(--lavender-deep);text-transform:uppercase}
.shimmer{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(217,212,240,0.55) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;pointer-events:none;visibility:hidden}
.spark{position:absolute;color:var(--accent);font-size:14px;line-height:1;pointer-events:none;visibility:hidden}
.spark.l{color:var(--lavender-deep)}
.action-dock{padding:8px 14px 14px;background:transparent;flex-shrink:0}
.tray{border-radius:0 0 16px 16px;background:rgba(255,255,255,0.97);box-shadow:0 8px 32px -8px rgba(30,20,10,0.18),0 0 0 1px rgba(26,20,10,0.07);position:relative}
.tray-menu{position:absolute;left:0;right:0;bottom:100%;background:inherit;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px -8px rgba(30,20,10,0.14),0 0 0 1px rgba(26,20,10,0.07);padding:8px 12px 2px;transform-origin:bottom center;visibility:hidden}
.tray-item{width:100%;height:32px;border:0;background:transparent;display:flex;align-items:center;gap:12px;padding:0 8px;color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;text-align:left;border-radius:8px}
.tray-item .hgi{color:#4b5563;font-size:15px}
.tray-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px}
.actions-toggle{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;padding:0}
.actions-toggle .hgi{font-size:15px}
.delete-link{border:0;background:transparent;color:#F87171;font:inherit;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:4px;padding:0}
.delete-link .hgi{font-size:14px}
.group-label{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:0.04em;color:var(--ink-soft);margin:0 0 6px;padding-left:3px;flex-shrink:0}
.group-label i{flex:1;height:1px;background:var(--line)}
.hgi{display:inline-block;line-height:1}
.round-btn .hgi{font-size:17px}.meta-btn .hgi{font-size:14px}.play .hgi{font-size:13px}