:root{color-scheme:light;--paper: #f7f2e8;--paper-strong: #fffdf8;--paper-blue: #edf5fb;--paper-warm: #fff1e1;--ink: #1a2731;--ink-soft: #5f6b73;--line: #22313d;--line-soft: rgba(34, 49, 61, .2);--line-faint: rgba(34, 49, 61, .08);--accent: #2f617f;--accent-warm: #ad6b39;--danger: #9f5146;--panel-shadow: 8px 8px 0 rgba(34, 49, 61, .08)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink);font-family:Hiragino Sans,Yu Gothic UI,Noto Sans JP,sans-serif;background:radial-gradient(circle at 14% 10%,rgba(47,97,127,.08),transparent 16%),radial-gradient(circle at 86% 18%,rgba(173,107,57,.08),transparent 14%),repeating-linear-gradient(0deg,rgba(34,49,61,.04) 0 1px,transparent 1px 34px),linear-gradient(180deg,#f9f5ec,#f1eadf)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.3;background:repeating-linear-gradient(90deg,rgba(34,49,61,.035) 0 1px,transparent 1px 34px),repeating-linear-gradient(135deg,rgba(34,49,61,.02) 0 2px,transparent 2px 18px)}button,input,select{font:inherit}img{display:block;max-width:100%}.wrap{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:28px 24px 60px}.panel{position:relative;overflow:hidden;border:2px solid var(--line);border-radius:30px;background:linear-gradient(180deg,#fffdf8f5,#f8f3eaf5);box-shadow:var(--panel-shadow)}.panel:before,.panel:after{content:"";position:absolute;pointer-events:none}.panel:before{inset:0;background:radial-gradient(circle at top left,rgba(255,255,255,.8),transparent 34%),repeating-linear-gradient(135deg,rgba(34,49,61,.03) 0 2px,transparent 2px 18px);opacity:.7}.panel:after{inset:10px;border:1px dashed var(--line-soft);border-radius:22px}.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:28px;margin-bottom:22px}.hero>*{position:relative;z-index:1}.eyebrow,.panel-kicker{margin:0 0 8px;color:var(--accent-warm);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}h1,h2,h3{margin:0}h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;letter-spacing:-.03em}h2{font-size:1.25rem}h3{font-size:1.15rem}.lead{max-width:52rem;margin:14px 0 18px;color:var(--ink-soft);line-height:1.8}.hero-stats{display:flex;flex-wrap:wrap;gap:10px}.hero-stats span,.active-chip,.board-status{display:inline-flex;align-items:center;padding:10px 14px;border:2px solid var(--line);border-radius:999px;background:linear-gradient(180deg,#ffffffeb,#f5f1e9eb);color:var(--ink);font-weight:700}.active-card{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:190px;padding:20px;border:2px solid var(--line);border-radius:24px;background:radial-gradient(circle at 85% 18%,rgba(47,97,127,.08),transparent 20%),repeating-linear-gradient(0deg,rgba(34,49,61,.04) 0 1px,transparent 1px 24px),linear-gradient(180deg,#fffdf8f5,#f3eee6f5)}.active-card p{margin:8px 0 0;color:var(--ink-soft);line-height:1.7}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.active-chip{padding:7px 12px;font-size:12px}.active-preview{display:grid;place-items:center;width:96px;height:96px;margin-left:auto;padding:10px;border:2px solid var(--line);border-radius:20px;background:repeating-linear-gradient(135deg,rgba(34,49,61,.04) 0 2px,transparent 2px 14px),var(--paper-strong)}.active-preview img{max-width:100%;max-height:100%;object-fit:contain}.workspace{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr) minmax(260px,320px);gap:20px;align-items:start}.shelf,.board-panel,.inspector,.tips{padding:22px}.shelf,.inspector{position:sticky;top:18px}.panel-head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-note{margin:0;color:var(--ink-soft);font-size:13px;font-weight:700}.search-label{display:block;margin-bottom:14px}.search-label span{display:block;margin-bottom:8px;color:var(--ink-soft);font-size:13px;font-weight:700}.search-label input{width:100%;padding:13px 16px;border:2px solid var(--line);border-radius:18px;background:#ffffffeb;color:var(--ink)}.search-label input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #2f617f1a}.shelf-help,.board-empty-card,.empty-inspector,.tip-card{background:repeating-linear-gradient(135deg,rgba(34,49,61,.03) 0 2px,transparent 2px 16px),#ffffffd1}.shelf-help{margin-bottom:14px;padding:14px 16px;border:2px dashed var(--line);border-radius:20px;color:var(--ink-soft);font-weight:700;line-height:1.7}.shelf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:calc(100vh - 300px);padding-right:4px;overflow:auto}.shelf-grid::-webkit-scrollbar{width:10px}.shelf-grid::-webkit-scrollbar-thumb{background:#22313d29;border-radius:999px}.shelf-item{display:flex;flex-direction:column;gap:10px;padding:12px;border:2px solid var(--line);border-radius:24px;background:#ffffffd6;text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;box-shadow:4px 4px #22313d0f}.shelf-item:hover{transform:translate(-1px,-1px);box-shadow:6px 6px #22313d14}.shelf-item.active{background:repeating-linear-gradient(135deg,rgba(47,97,127,.08) 0 2px,transparent 2px 16px),#fffffff0}.shelf-thumb,.preview-art,.armed-preview{display:grid;place-items:center;border:2px solid var(--line);border-radius:20px;background:radial-gradient(circle at top left,rgba(255,255,255,.8),transparent 34%),repeating-linear-gradient(0deg,rgba(34,49,61,.035) 0 1px,transparent 1px 22px),var(--paper-strong);overflow:hidden}.shelf-thumb{aspect-ratio:1;padding:10px}.shelf-thumb img,.preview-art img,.armed-preview img{max-width:100%;max-height:100%;object-fit:contain}.shelf-name{font-size:13px;font-weight:700;line-height:1.45}.empty-card{grid-column:1 / -1;padding:22px;border:2px dashed var(--line);border-radius:22px;background:#ffffffc2;color:var(--ink-soft);text-align:center;line-height:1.7}.board-head{align-items:center}.board-controls{position:relative;z-index:1;display:grid;gap:14px;margin-top:16px}.board-controls .board-status{width:fit-content;max-width:100%}.board-toolbar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.bg-picker,.toolbar-actions,.action-grid,.upload-row{display:flex;flex-wrap:wrap;gap:10px}.media-rack{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.media-card{padding:16px;border:2px solid var(--line);border-radius:24px;background:repeating-linear-gradient(135deg,rgba(34,49,61,.03) 0 2px,transparent 2px 16px),#ffffffd1}.media-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.media-copy{margin:6px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.65}.media-tag{display:inline-flex;align-items:center;padding:8px 12px;border:2px solid var(--line);border-radius:999px;background:#ffffffeb;color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap}.media-tag.sound-playing{color:var(--accent)}.media-tag.sound-off{color:var(--ink-soft)}.media-tag.sound-error{color:var(--danger)}.media-preview,.media-placeholder{margin-top:12px;border:2px solid var(--line);border-radius:20px;overflow:hidden;min-height:132px;background:radial-gradient(circle at top left,rgba(255,255,255,.8),transparent 34%),repeating-linear-gradient(0deg,rgba(34,49,61,.035) 0 1px,transparent 1px 22px),var(--paper-strong)}.media-preview img{width:100%;aspect-ratio:4 / 3;object-fit:cover}.media-placeholder{display:grid;place-items:center;padding:18px;color:var(--ink-soft);line-height:1.7;text-align:center}.chip-btn,.ghost-btn,.action-btn,.inline-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:2px solid var(--line);border-radius:999px;background:linear-gradient(180deg,#ffffffeb,#f4efe7eb);color:var(--ink);font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;box-shadow:4px 4px #22313d0f}.chip-btn.active{background:repeating-linear-gradient(135deg,rgba(47,97,127,.12) 0 2px,transparent 2px 14px),#f5fbff;color:var(--accent)}.ghost-btn:hover,.action-btn:hover,.chip-btn:hover,.inline-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px #22313d14}.ghost-btn:disabled,.action-btn:disabled,.chip-btn:disabled,.inline-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.ghost-btn.danger,.action-btn.danger,.inline-btn.danger-outline{color:var(--danger);border-color:var(--danger)}.board-shell{position:relative;padding:16px;border:2px solid var(--line);border-radius:32px;background:repeating-linear-gradient(135deg,rgba(34,49,61,.035) 0 2px,transparent 2px 18px),#ffffff94}.board{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4 / 3;border:2px solid var(--line);border-radius:26px;cursor:crosshair;touch-action:none}.board:before,.board:after{content:"";position:absolute;inset:0;pointer-events:none}.board:after{inset:14px;border:1px dashed var(--line-soft);border-radius:18px}.board.has-image-bg{background-color:#f4efe7}.board.has-image-bg:before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 32px),linear-gradient(180deg,#ffffff14,#ffffff14)}.board.theme-atelier{background:repeating-linear-gradient(0deg,rgba(34,49,61,.05) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(34,49,61,.035) 0 1px,transparent 1px 28px),linear-gradient(180deg,#fffbee,#f5e7c4)}.board.theme-plain{background:#fff}.board.theme-plain:before{background:none}.board.theme-atelier:before{background:radial-gradient(circle at 14% 16%,rgba(255,255,255,.6),transparent 16%),radial-gradient(circle at 82% 24%,rgba(255,255,255,.32),transparent 14%)}.board.theme-blueprint{background:repeating-linear-gradient(0deg,rgba(47,97,127,.14) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,rgba(47,97,127,.14) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(47,97,127,.18) 0 2px,transparent 2px 136px),repeating-linear-gradient(90deg,rgba(47,97,127,.18) 0 2px,transparent 2px 136px),linear-gradient(180deg,#f8fcff,#deedf8)}.board.theme-blueprint:before{background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.5),transparent 20%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.3),transparent 22%)}.board.theme-sunset{background:repeating-linear-gradient(135deg,rgba(173,107,57,.08) 0 2px,transparent 2px 20px),repeating-linear-gradient(0deg,rgba(34,49,61,.04) 0 1px,transparent 1px 30px),linear-gradient(180deg,#fff6eb,#ffd7c3)}.board.theme-sunset:before{background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.48),transparent 16%),radial-gradient(circle at 82% 78%,rgba(255,255,255,.3),transparent 18%)}.board-empty{position:absolute;inset:0;display:grid;place-items:center;padding:32px;text-align:center;color:#1a2731c7;pointer-events:none}.board-empty-card{max-width:360px;padding:24px;border:2px solid var(--line);border-radius:24px}.board-empty-card strong{display:block;margin-bottom:8px;font-size:1.2rem}.board-empty-card p{margin:0;line-height:1.7}.placed-stamp{position:absolute;width:calc(var(--stamp-size, 180px) * var(--stamp-scale, 1));padding:0;border:0;background:transparent;cursor:grab;transform-origin:center center;touch-action:none}.placed-stamp img{width:100%;height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(3px 5px 0 rgba(34,49,61,.09))}.board.theme-plain .placed-stamp img{filter:none}.placed-stamp.selected:after{content:"";position:absolute;inset:-10px;border:2px dashed var(--line);border-radius:22px;background:#ffffff14;pointer-events:none}.placed-stamp:active{cursor:grabbing}.small{margin:16px 2px 0;color:var(--ink-soft);font-size:13px;line-height:1.7}.preview-card{margin-bottom:16px;padding:18px;border:2px solid var(--line);border-radius:24px;background:#ffffffd1}.preview-art{aspect-ratio:1;margin-bottom:12px;padding:16px}.preview-name{font-weight:800;line-height:1.45}.preview-meta{margin-top:6px;color:var(--ink-soft);font-size:13px;line-height:1.6}.range-control{display:block;margin-bottom:14px}.range-control.compact{margin-bottom:12px}.range-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;color:var(--ink-soft);font-size:13px;font-weight:700}.range-control input{width:100%;accent-color:var(--accent)}.audio-note{margin:12px 0 0;color:var(--ink-soft);font-size:12px;line-height:1.65}.empty-inspector{padding:22px;border:2px dashed var(--line);border-radius:24px;color:var(--ink-soft);line-height:1.7}.empty-inspector strong{display:block;margin-bottom:8px;color:var(--ink)}.armed-preview{width:110px;height:110px;margin:16px auto;padding:12px}.tips{margin-top:20px;padding:24px}.tips-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tip-card{padding:18px;border:2px solid var(--line);border-radius:24px}.tip-card strong{display:block;margin-bottom:8px;font-size:1rem}.tip-card p{margin:0;color:var(--ink-soft);line-height:1.7}@media(max-width:980px){.workspace{grid-template-columns:minmax(0,1fr);gap:16px}.shelf,.inspector{position:static}.board-panel{order:1}.shelf{order:2}.inspector{order:3}.hero{padding:24px 26px}.panel-head,.board-toolbar,.media-head{align-items:stretch}.shelf-grid{max-height:none;grid-template-columns:repeat(3,minmax(0,1fr))}.media-rack{grid-template-columns:1fr}.bg-picker,.toolbar-actions{width:100%}}@media(max-width:760px){.wrap{padding:18px 14px 36px}.hero{grid-template-columns:1fr;padding:22px 20px}.workspace{gap:14px}.shelf,.board-panel,.inspector,.tips{padding:18px}.board-shell{padding:12px}.board-empty{padding:22px}.board-empty-card{padding:18px}.board-empty-card strong{font-size:1.05rem}.shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shelf-item{padding:10px;border-radius:20px}.shelf-name{font-size:12px}.board-controls{gap:12px}.board-toolbar,.media-head{flex-direction:column;align-items:stretch}.media-head{gap:10px}.media-tag{width:fit-content;max-width:100%}.tips-grid{grid-template-columns:1fr}}@media(max-width:560px){h1{font-size:2.1rem}.panel{border-radius:24px}.panel:after{inset:8px;border-radius:18px}.bg-picker,.toolbar-actions,.action-grid,.upload-row{width:100%}.chip-btn,.ghost-btn,.action-btn,.inline-btn{flex:1 1 auto}.search-label input,.chip-btn,.ghost-btn,.action-btn,.inline-btn{min-height:46px}.media-card,.preview-card,.empty-inspector{padding:14px}.preview-art{padding:12px}.range-label{font-size:12px}}@media(hover:none)and (pointer:coarse)and (orientation:landscape)and (max-width:960px)and (max-height:600px){.wrap{padding:8px 8px 12px}.panel{border-radius:18px}.panel:after{inset:5px;border-radius:12px}.hero{margin-bottom:8px;padding:10px 14px}.eyebrow,.panel-kicker{display:none}h1{font-size:clamp(1.3rem,3vw,1.7rem)}h2{font-size:.92rem}h3{font-size:.88rem}.workspace{grid-template-columns:minmax(126px,.82fr) minmax(0,1.55fr) minmax(134px,.9fr);gap:8px;align-items:stretch}.board-panel,.shelf,.inspector{order:0;min-height:0;padding:10px}.board-panel{display:flex;flex-direction:column;gap:0;overflow:hidden}.shelf,.inspector{display:flex;flex-direction:column;align-self:stretch;overflow:hidden}.panel-head{gap:6px;margin-bottom:8px}.panel-note{font-size:10px}.search-label{margin-bottom:8px}.search-label span{margin-bottom:4px;font-size:10px}.search-label input{min-height:34px;padding:7px 10px;border-radius:12px}.shelf-help{display:none}.shelf-grid{flex:0 0 auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;height:clamp(320px,43vw,372px);max-height:none;align-content:start;overflow:auto;padding-right:1px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.shelf-item{gap:4px;padding:6px;border-radius:12px;box-shadow:2px 2px #22313d0f}.shelf-thumb{padding:4px;border-radius:10px}.shelf-name{font-size:10px;line-height:1.2}.board-shell{padding:6px;border-radius:18px;display:grid;place-items:center}.board{width:min(100%,390px);border-radius:14px}.board:after{inset:7px;border-radius:10px}.board-empty{padding:10px}.board-empty-card{max-width:190px;padding:10px;border-radius:14px}.board-empty-card strong{margin-bottom:4px;font-size:.82rem}.board-empty-card p{font-size:10px;line-height:1.4}.board-controls{gap:8px;margin-top:8px}.board-toolbar{flex-direction:row;align-items:center;justify-content:space-between;gap:6px}.bg-picker,.toolbar-actions,.action-grid,.upload-row{width:auto;gap:6px}.media-rack{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.media-card,.preview-card,.empty-inspector{padding:10px;border-radius:14px}.media-head{flex-direction:row;align-items:flex-start;gap:6px;margin-bottom:6px}.media-copy,.preview-meta,.audio-note,.small{display:none}.media-tag{padding:4px 8px;font-size:10px}.media-preview,.media-placeholder{min-height:56px;margin-top:6px;border-radius:10px}.media-placeholder{padding:8px;font-size:10px;line-height:1.35}.chip-btn,.ghost-btn,.action-btn,.inline-btn{min-height:28px;padding:5px 8px;border-radius:10px;font-size:10px;box-shadow:2px 2px #22313d0f}.preview-art{margin-bottom:6px;padding:8px;border-radius:10px}.preview-name{font-size:11px}.range-control{margin-bottom:8px}.range-control.compact{margin-bottom:6px}.range-label{margin-bottom:3px;font-size:10px}.empty-inspector{font-size:10px;line-height:1.4}.armed-preview{width:58px;height:58px;margin:8px auto;padding:6px}.small{margin-top:10px}.placed-stamp.selected:after{inset:-5px;border-radius:14px}}