@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:wght@600;700&display=swap";:root{color-scheme:light;--bg: #f7f3ea;--ink: #1f1d1a;--muted: #6e6559;--accent: #e4572e;--accent-strong: #c23b14;--paper: #ffffff;--border: #e2d9c9;--shadow: 0 14px 40px rgba(0, 0, 0, .08)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,system-ui,sans-serif;background:radial-gradient(circle at top,#fff6e5,#f7f3ea 45%,#efe6d7);color:var(--ink)}.page{max-width:1600px;width:min(96vw,1600px);margin:0 auto;padding:28px 24px 48px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px;position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#f7f3eafa,#f7f3eae0);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px 0}h1{font-family:Fraunces,serif;font-size:36px;margin:0 0 6px}.subtitle{margin:0;color:var(--muted);max-width:520px}.brand{min-width:260px}.toolbar{display:flex;flex-direction:column;gap:10px;flex:1}.toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--muted)}.chip-ok{background:#e9f6ef;border-color:#bfe5cb;color:#2d6a4f}.chip-warn{background:#fff4de;border-color:#f1d1a7;color:#8a5a2b}.action-group{display:flex;flex-wrap:wrap;gap:8px}.btn{border:1px solid var(--border);padding:8px 14px;border-radius:999px;background:#fff;font-weight:600;font-size:13px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 12px #00000014}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-strong)}.btn-icon{display:inline-flex;align-items:center;gap:6px}.icon-gear{width:14px;height:14px;display:inline-block;background:radial-gradient(circle at center,#6b5b4b 0 3px,transparent 4px),conic-gradient(from 0deg,#6b5b4b 0 10%,transparent 10% 20%,#6b5b4b 20% 30%,transparent 30% 40%,#6b5b4b 40% 50%,transparent 50% 60%,#6b5b4b 60% 70%,transparent 70% 80%,#6b5b4b 80% 90%,transparent 90% 100%);border-radius:50%;border:1px solid #6b5b4b}.btn-ghost{background:#fff7ea}.btn-danger{background:#ffe7e7;border-color:#f0b8b8;color:#8a1c1c}.btn-xs{padding:4px 10px;font-size:11px}.btn-link{background:transparent;border:none;padding:0;font-size:12px;color:#5f4b3a}.btn-reset{border:none;background:transparent;padding:0}.dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:var(--shadow);min-width:160px;z-index:20}.dropdown-item{width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:none;background:transparent;font-size:13px;font-weight:600;cursor:pointer}.dropdown-item:hover{background:#fff4de}.notice{background:#fff4de;border:1px solid #f1d1a7;color:#6a4a20;padding:10px 14px;border-radius:12px;margin-bottom:14px;font-size:13px}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:16px}.control{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.control-title{font-weight:700}.control-subtitle{color:var(--muted);font-size:12px}.control-danger{border-color:#f0b8b8;background:#fff5f5}select{border:1px solid var(--border);border-radius:999px;padding:8px 12px;background:#fff;font-weight:600;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.switch{position:relative;display:inline-block;width:48px;height:28px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background-color:#e8ddd0;border-radius:999px;transition:.2s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;top:3px;background-color:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 6px #0000001f}.switch input:checked+.slider{background-color:var(--accent)}.switch input:checked+.slider:before{transform:translate(20px)}.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}.meta-field{display:flex;flex-direction:column;gap:6px}label{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}input{padding:10px 12px;border-radius:10px;border:1px solid var(--border);font-size:14px;background:#fff;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.status-row{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--muted);margin-bottom:12px}.status{color:var(--accent-strong);font-weight:600}.status-inline{font-size:12px;color:var(--muted);margin:6px 0 12px}.canvas{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.canvas-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px}.canvas-title{font-size:22px;font-weight:700}.canvas-tagline{font-size:14px;color:var(--muted)}.canvas-meta{font-size:13px;color:var(--muted);text-align:right}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-areas:"problemColumn solution uniqueValueColumn unfairAdvantage customerSegmentsColumn" "problemColumn keyMetrics uniqueValueColumn channels customerSegmentsColumn" "costs costs revenue revenue revenue";gap:0;border:2px solid #2b2b2b;border-radius:10px;overflow:visible;background:#fff}.cell{border-right:2px solid #2b2b2b;border-bottom:2px solid #2b2b2b;padding:10px 10px 12px;display:flex;flex-direction:column;min-height:150px;background:#fff;overflow:visible}.cell-title{font-weight:700;margin-bottom:8px;font-size:13px;letter-spacing:.04em;color:var(--muted);display:inline-flex;align-items:center;gap:8px}.cell-title-text{text-transform:uppercase}.cell-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.add-note{border-radius:999px}.cell-hint{font-size:12px;color:#8d8477;font-style:italic;margin-bottom:8px}.notes{display:grid;gap:6px;padding:2px}.note{padding:8px;border-radius:10px;box-shadow:0 6px 14px #00000014;display:flex;flex-direction:column;gap:8px}.note textarea{border:none;background:transparent;resize:vertical;min-height:36px;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;flex:0 0 auto;outline:none}.note-footer{display:flex;justify-content:space-between;align-items:center}.note-colors{display:flex;gap:6px}.color-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.2);cursor:pointer}.color-dot.active{outline:2px solid #222}.note-delete{border:none;background:transparent;color:#5f4b3a;font-size:12px;cursor:pointer}.empty-notes{font-size:12px;color:#9b9082}.tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid #d7c9b6;background:#fff7ea;color:#6a4a20;font-size:11px;font-weight:700;cursor:help}.tooltip-content{position:absolute;left:50%;bottom:24px;transform:translate(-50%);background:#1f1d1a;color:#fff;font-size:12px;line-height:1.4;padding:10px 12px;border-radius:10px;width:min(280px,65vw);opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:100;text-transform:none;font-weight:400}.tooltip:hover .tooltip-content,.tooltip:focus .tooltip-content{opacity:1}textarea{border:none;resize:none;flex:1;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;line-height:1.4;color:var(--ink);outline:none}input::placeholder,textarea::placeholder{font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.icon-trash{font-size:14px;line-height:1}.solution{grid-area:solution}.keyMetrics{grid-area:keyMetrics}.unfairAdvantage{grid-area:unfairAdvantage}.channels{grid-area:channels}.costs{grid-area:costs}.revenue{grid-area:revenue}.problemColumn{grid-area:problemColumn}.uniqueValueColumn{grid-area:uniqueValueColumn}.customerSegmentsColumn{grid-area:customerSegmentsColumn}.grid .costs{border-bottom:none}.grid .revenue{border-bottom:none;border-right:none}.grid .customerSegmentsColumn{border-right:none}.stacked{padding:0}.stacked .stacked-block{padding:10px 10px 12px;display:flex;flex-direction:column;min-height:200px}.stack-divider{height:2px;background:#2b2b2b;width:100%}.grid .problemColumn,.grid .uniqueValueColumn,.grid .customerSegmentsColumn,.grid .solution,.grid .unfairAdvantage,.grid .keyMetrics,.grid .channels{min-height:230px}.brainstorm{margin-top:16px;border:2px solid #2b2b2b;border-radius:12px;padding:12px;background:#fff;min-height:180px;display:flex;flex-direction:column}.brainstorm textarea{min-height:140px}.copyright{margin-top:10px;font-size:12px;color:#6f6559;text-align:center}.footer{margin-top:20px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.footer-links{margin-top:14px;font-size:13px;text-align:center;color:var(--muted)}.footer-links a{color:inherit;text-decoration:none;font-weight:600}.footer-links a:hover{text-decoration:underline}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c171266;display:grid;place-items:center;padding:24px;z-index:30}.modal-card{background:#fff;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);padding:20px;max-width:720px;width:100%}.settings-card{max-width:760px}.settings-grid{display:grid;gap:12px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.modal-header h2{margin:0 0 6px;font-family:Fraunces,serif}.modal-header p{margin:0;color:var(--muted)}.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.template-card{border-radius:14px;border:1px solid var(--border);background:#fff9f2;padding:14px;text-align:left;transition:transform .15s ease,box-shadow .15s ease}.template-card:hover{transform:translateY(-2px);box-shadow:0 10px 18px #0000001f}.template-title{font-weight:700;margin-bottom:6px}.template-desc{color:var(--muted);font-size:13px}.template-preview{border-radius:10px;background:#fff;border:1px solid #efe2d1;padding:8px;margin-bottom:10px}.preview-header{height:10px;background:linear-gradient(90deg,#f0e3d3,#f7efe3);border-radius:6px;margin-bottom:6px}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.preview-cell{height:18px;border-radius:4px;background:#f4eee3;border:1px solid #eadcc9}.toast{position:fixed;right:24px;bottom:24px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow);z-index:40;font-weight:600}.toast.success{border-color:#b6d9c8;background:#edf8f1}.toast.error{border-color:#f0b8b8;background:#fff0f0}.toast.info{border-color:#c9d7f2;background:#f0f5ff}@media (max-width: 900px){.topbar{flex-direction:column;position:static;padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.canvas-header{flex-direction:column;align-items:flex-start}.grid{grid-template-columns:1fr;grid-template-areas:"problemColumn" "solution" "uniqueValueColumn" "unfairAdvantage" "customerSegmentsColumn" "keyMetrics" "channels" "costs" "revenue";border:none}.cell{border:1px solid var(--border);border-radius:12px;margin-bottom:12px}.footer{flex-direction:column;gap:6px}}@media print{.toast{display:none!important}body{background:#fff}.page{max-width:none;padding:0}.topbar,.notice,.meta,.status-inline,.footer,.footer-links,.modal{display:none!important}.canvas{border:none;box-shadow:none;padding:0}.cell{border:2px solid #111}textarea{font-size:12px}.add-note,.tooltip,.note-footer,.empty-notes{display:none!important}.grid{border:2px solid #111}.brainstorm{border:2px solid #111;page-break-inside:avoid}@page{size:A4 landscape;margin:10mm}}
