src/studio-v2.css

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700;800&family=Noto+Sans+JP:wght@500;600;700;800&display=swap');

:root{--v2-ink:#0a0a0b;--v2-white:#fff;--v2-cloud:#f3f4f6;--v2-line:#d8dae0;--v2-orange:#ff4f00;--v2-blue:#2447ff;--v2-yellow:#ffd928;--v2-green:#23d18b;--v2-muted:#6d7078}
*{box-sizing:border-box}.app{background:var(--v2-cloud);color:var(--v2-ink);font-family:Manrope,'Noto Sans JP',sans-serif}.shell{margin-left:72px}.v2-rail{width:72px;background:var(--v2-ink);border:0;display:flex;flex-direction:column;align-items:center;padding:12px 0;z-index:50}.v2-brand{width:48px;height:48px;border:0;background:var(--v2-orange);color:#111;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 7px;font:800 12px Manrope;letter-spacing:-.08em}.v2-brand b{font:800 12px Manrope}.v2-rail .project-meta,.v2-rail .rail-foot{display:none}.v2-rail nav{display:flex;flex:1;flex-direction:column;justify-content:center;width:100%;gap:4px}.v2-rail nav button{position:relative;width:100%;height:54px;border:0;background:transparent;color:#777;display:flex;align-items:center;justify-content:center;padding:0}.v2-rail nav button b{position:absolute;left:63px;display:none;width:max-content;padding:8px 11px;background:#111;color:#fff;font-size:11px;letter-spacing:.02em}.v2-rail nav button:hover b{display:block}.v2-rail nav button span{width:28px;height:28px;border:1px solid #444;border-radius:50%;display:grid;place-items:center;font:500 9px 'DM Mono'}.v2-rail nav button.active span{background:var(--v2-white);border-color:var(--v2-white);color:#111}.v2-rail nav button.active:after{content:"";position:absolute;right:0;width:4px;height:30px;background:var(--v2-orange)}.v2-rail nav button.done span{color:var(--v2-green);border-color:#28634f}.rail-help{width:30px;height:30px;border:1px solid #555;border-radius:50%;background:none;color:#aaa}.v2-topbar{left:72px;height:64px;padding:0 24px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-color:var(--v2-line);display:grid;grid-template-columns:1fr minmax(160px,420px) 1fr}.project-title{display:flex!important;align-items:center;gap:10px}.project-title .project-dot{width:9px;height:9px;background:var(--v2-orange);border-radius:50%}.project-title b{font-size:13px}.project-title small{color:var(--v2-muted);font:500 10px 'DM Mono'}.stage-pulse{height:3px;background:#e5e6ea;align-self:center}.stage-pulse span{display:block;height:100%;background:var(--v2-blue);transition:width .4s cubic-bezier(.2,.8,.2,1)}.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.top-actions button{height:34px;border:1px solid var(--v2-line);padding:0 14px;background:#fff;font:600 11px Manrope}.save-state i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--v2-green)}

.v2-hearing{min-height:calc(100vh - 64px);grid-template-columns:minmax(570px,1.08fr) minmax(440px,.92fr);background:var(--v2-white)}.v2-hearing .hearing-main{padding:30px clamp(30px,4.5vw,76px) 54px;overflow:visible}.hearing-context{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:clamp(38px,7vh,74px)}.hearing-context>div{display:flex;align-items:center;gap:13px}.hearing-context>div>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--v2-yellow);font:500 9px 'DM Mono'}.hearing-context p{margin:0}.hearing-context small{display:block;color:var(--v2-muted);font:500 8px 'DM Mono';letter-spacing:.14em}.hearing-context b{display:block;margin-top:3px;font-size:11px;line-height:1.45}.v2-hearing .source-drop{width:min(300px,46%);margin:0;min-height:48px;background:var(--v2-cloud);border:1px dashed #bfc2ca;box-shadow:none;border-radius:0;text-align:left;padding:8px}.v2-hearing .source-drop:hover{transform:none;box-shadow:inset 0 0 0 2px var(--v2-blue)}.v2-hearing .source-drop>span{width:30px;height:30px;min-width:30px;background:var(--v2-blue);display:grid;place-items:center}.v2-hearing .source-drop b{font-size:10px}.v2-hearing .source-drop small{font-size:8px;color:var(--v2-muted)}
.v2-question{animation:question-in .42s cubic-bezier(.2,.8,.2,1)}@keyframes question-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.v2-question:before{display:none}.question-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}.question-meta span{padding:7px 9px;background:var(--v2-ink);color:#fff;font:500 9px 'DM Mono'}.question-meta i{font:500 10px 'DM Mono';font-style:normal;letter-spacing:.12em;color:var(--v2-orange);text-transform:uppercase}.v2-question h1{max-width:750px;margin:0;font-size:clamp(31px,3.25vw,54px);line-height:1.12;letter-spacing:-.055em;font-weight:800}.v2-question>p{margin:16px 0 28px;color:var(--v2-muted);font-size:12px;line-height:1.8}.v2-question .answer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v2-question .answer-grid button{position:relative;min-height:146px;padding:17px 18px 16px;text-align:left;border:1px solid var(--v2-line);background:#fff;color:var(--v2-ink);box-shadow:none;transition:transform .18s,border .18s,box-shadow .18s,background .18s}.v2-question .answer-grid button:before{display:none}.v2-question .answer-grid button:hover{transform:translate(-3px,-3px);background:#fff;color:var(--v2-ink);border-color:var(--v2-ink);box-shadow:5px 5px 0 var(--v2-ink)}.choice-top{display:flex;align-items:flex-start;justify-content:space-between}.choice-top>i{display:grid;place-items:center;width:42px;height:42px;background:var(--v2-cloud);font:800 14px Manrope;font-style:normal}.choice-top>em{color:#a3a5ab;font:500 9px 'DM Mono';font-style:normal}.v2-question .answer-grid b{display:block;margin-top:22px;font-size:16px;letter-spacing:-.025em}.v2-question .answer-grid small{display:block;margin-top:5px;color:var(--v2-muted);font-size:10px;line-height:1.5}.choice-arrow{position:absolute;right:16px;bottom:13px;font-size:14px;opacity:0;transform:translate(-5px,5px);transition:.18s}.v2-question .answer-grid button:hover .choice-arrow{opacity:1;transform:none}.v2-question .answer-grid button:nth-child(4n+1) .choice-top>i{background:var(--v2-orange)}.v2-question .answer-grid button:nth-child(4n+2) .choice-top>i{background:var(--v2-blue);color:#fff}.v2-question .answer-grid button:nth-child(4n+3) .choice-top>i{background:var(--v2-yellow)}.v2-question .answer-grid button:nth-child(4n+4) .choice-top>i{background:var(--v2-green)}.answer-history{display:flex;gap:6px;margin-top:22px;overflow:auto;padding-bottom:5px}.answer-history button{min-width:max-content;border:1px solid var(--v2-line);background:var(--v2-cloud);padding:8px 10px;text-align:left}.answer-history small{display:none}.answer-history b{font-size:9px}.answer-history span{margin-left:8px;color:var(--v2-blue);font-size:8px}
.live-brief{position:sticky;top:64px;height:calc(100vh - 64px);background:var(--v2-ink);color:#fff;padding:16px;overflow:hidden}.preview-chrome{height:34px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #333;padding:0 3px 12px}.preview-chrome>span{width:6px;height:6px;border-radius:50%;background:#555}.preview-chrome>span:first-child{background:var(--v2-orange)}.preview-chrome b{margin-left:8px;color:#8d9098;font:500 8px 'DM Mono';letter-spacing:.13em}.preview-chrome em{margin-left:auto;color:var(--v2-yellow);font:500 9px 'DM Mono';font-style:normal}.mini-lp{position:relative;height:calc(100% - 136px);min-height:430px;margin-top:12px;background:#f7f7f4;color:var(--v2-ink);overflow:hidden;transition:background .25s}.mini-nav{position:relative;z-index:2;display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid #cacbd0}.mini-nav b{font:800 11px/.82 Manrope}.mini-nav span{margin-left:auto;font:500 7px 'DM Mono';color:#777}.mini-nav i{width:22px;height:22px;margin-left:12px;background:var(--v2-orange);border-radius:50%}.mini-copy{position:relative;z-index:2;width:61%;padding:clamp(46px,7vh,82px) 0 0 28px}.mini-copy small{font:500 7px 'DM Mono';letter-spacing:.12em;color:var(--v2-blue)}.mini-copy h2{margin:13px 0 15px;font-size:clamp(27px,3vw,50px);line-height:.98;letter-spacing:-.07em}.mini-copy h2 em{color:var(--v2-orange);font-style:normal}.mini-copy p{max-width:320px;margin:0;font-size:9px;line-height:1.75;color:#575a61}.mini-copy button{margin-top:24px;border:0;background:var(--v2-ink);color:#fff;padding:12px 14px;font:700 8px Manrope}.mini-copy button span{display:inline-block;margin-left:20px;color:var(--v2-yellow)}.mini-art{position:absolute;right:-5%;top:16%;width:43%;height:70%;background:var(--v2-blue);transform:rotate(4deg)}.mini-art:before{content:"";position:absolute;inset:14%;border:1px solid #ffffff70;border-radius:50%}.mini-art b{position:absolute;right:9%;bottom:8%;color:#fff;font-size:clamp(32px,4vw,68px);line-height:.78;letter-spacing:-.09em}.art-orbit{position:absolute;left:-22%;top:25%;width:70%;aspect-ratio:1;border:20px solid var(--v2-orange);border-radius:50%;mix-blend-mode:multiply}.art-card{position:absolute;display:flex;flex-direction:column;justify-content:space-between;width:66px;height:86px;padding:8px;background:var(--v2-yellow);color:#111;font:800 22px Manrope;box-shadow:7px 7px 0 #111}.art-card small{font:500 6px 'DM Mono'}.art-card.one{left:-13%;bottom:7%;transform:rotate(-9deg)}.art-card.two{right:5%;top:4%;background:#fff;transform:rotate(5deg)}.tone-credible .mini-art{background:#123d33}.tone-credible .mini-copy h2 em{color:#123d33}.tone-clear .mini-art{background:var(--v2-orange)}.tone-clear .mini-copy h2 em{color:var(--v2-blue)}.tone-warm .mini-art{background:#ff76a8}.tone-warm .mini-copy h2 em{color:#c52660}.brief-signals{height:76px;padding-top:12px}.brief-signals>span{font:500 7px 'DM Mono';letter-spacing:.15em;color:#777}.brief-signals>div{display:flex;gap:5px;margin-top:7px;overflow:hidden}.brief-signals i{min-width:max-content;padding:7px 9px;border:1px solid #3e4047;color:#fff;font:500 8px Manrope;font-style:normal}.brief-signals p{margin:0;color:#666;font-size:9px}
.v2-done{max-width:760px;padding-top:5vh}.v2-done small{color:var(--v2-blue);font:500 9px 'DM Mono';letter-spacing:.16em}.v2-done h1{font-size:clamp(42px,5vw,75px);line-height:1.02;letter-spacing:-.065em}.v2-done h1 em{color:var(--v2-orange);font-style:normal}.v2-done p{max-width:570px;font-size:13px;line-height:1.8;color:var(--v2-muted)}.v2-done button{display:flex;align-items:center;justify-content:space-between;width:280px;margin-top:28px;padding:5px 5px 5px 18px;border:0;background:var(--v2-blue);color:#fff;font-weight:700}.v2-done button i{display:grid;place-items:center;width:42px;height:42px;background:#fff;color:#111;font-style:normal}

@media(max-width:1050px){.v2-hearing{grid-template-columns:1fr}.live-brief{position:relative;top:0;height:640px}.v2-question .answer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.shell{margin-left:0}.v2-rail{position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;height:58px;flex-direction:row;padding:0 8px}.v2-brand,.rail-help{display:none}.v2-rail nav{flex-direction:row}.v2-rail nav button{height:58px}.v2-rail nav button b{display:none}.v2-rail nav button.active:after{right:auto;bottom:0;width:28px;height:3px}.v2-topbar{left:0;grid-template-columns:1fr 100px;height:56px;padding:0 14px}.stage-pulse{display:none}.top-actions .ghost-action{display:none}.v2-hearing{min-height:calc(100vh - 114px)}.v2-hearing .hearing-main{padding:22px 18px 38px}.hearing-context{align-items:flex-start;margin-bottom:36px}.hearing-context>div>span{display:none}.hearing-context b{font-size:10px}.v2-hearing .source-drop{width:48%}.v2-question h1{font-size:34px}.v2-question .answer-grid{grid-template-columns:1fr}.v2-question .answer-grid button{min-height:118px}.live-brief{height:570px;padding:10px;margin-bottom:58px}.mini-copy{width:68%;padding-left:18px}.mini-art{right:-16%;width:48%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Layout reset after the v1 grid shell. */
.app{display:block}
.shell{width:calc(100% - 72px);margin-left:72px}
.v2-topbar{left:0}
.v2-rail nav button.active{background:transparent;box-shadow:none}
.v2-hearing .hearing-main{min-width:0}
.v2-hearing .hearing-main:after{display:none}
@media(max-width:760px){.shell{width:100%;margin-left:0}}

/* Crisp system across every production stage. */
.stage-page{background:var(--v2-white)}
.stage-intro>small,.review-head small,.page-canvas small,.page-canvas em{color:var(--v2-blue)}
.stage-intro em{color:var(--v2-orange)}
.strategy-grid{background:var(--v2-line);border-color:var(--v2-line)}
.strategy-grid article{background:var(--v2-white)}
.journey,.editor-shell,.comment-box,.ship-check{background:var(--v2-ink)}
.journey small,.editor-shell aside>span,.ship-check b{color:var(--v2-yellow)}
.research-ledger{border-color:var(--v2-ink)}
.research-ledger button,.editor-bar .primary,.review-head .primary{background:var(--v2-blue);border-color:var(--v2-blue);color:#fff}
.tone-grid>article{border-color:var(--v2-line)}
.tone-grid>article.selected{border-color:var(--v2-blue);box-shadow:8px 8px 0 var(--v2-ink)}
.tone-grid article.selected .tone-copy button{background:var(--v2-blue);border-color:var(--v2-blue)}
.mix-bar{background:var(--v2-ink)}
.mix-bar button,.comment-box button{background:var(--v2-yellow);color:var(--v2-ink)}
.canvas-scroll{background:#dfe1e6}
.page-canvas{background:#fff}
.page-canvas>section:nth-child(even){background-color:var(--v2-cloud)}
.comment-rail{background:var(--v2-white);border-color:var(--v2-line)}
.export-grid article{background:var(--v2-white);border-color:var(--v2-line)}
.export-grid article>span{color:var(--v2-orange)}
.export-grid button{background:var(--v2-ink)}