src/styles.css

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');
.demo-button{width:100%;margin-top:10px;border:1px solid var(--ink);background:var(--blue);color:white;padding:11px;font-size:10px;font-weight:800;cursor:pointer}.demo-button:hover{background:var(--ink)}
.privacy-points{margin-top:18px;border-top:1px solid var(--ink);padding-top:9px}.privacy-points p{display:flex;gap:10px;align-items:center;margin:10px 0;font-size:10px;font-weight:700}.privacy-points i{font:9px 'DM Mono';font-style:normal;color:var(--blue)}.preflight-empty,.preflight-results{min-height:610px;background:var(--paper);border:1px solid var(--ink);padding:42px}.preflight-empty>span,.preflight-results header span,.slide-risks>div span{font:500 10px 'DM Mono';letter-spacing:.12em;color:var(--blue)}.preflight-empty h2{font-size:clamp(34px,5vw,68px);letter-spacing:-.065em;line-height:1.05;margin:18px 0}.preflight-empty>p{max-width:600px;color:#68645c;font-size:13px}.preflight-empty>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:56px}.preflight-empty article{border-top:1px solid var(--ink);padding-top:14px}.preflight-empty article b{font:500 10px 'DM Mono';color:var(--blue)}.preflight-empty article h3{font-size:18px}.preflight-empty article p{font-size:11px;line-height:1.8}.preflight-empty footer,.preflight-results>footer{margin-top:45px;background:var(--ink);color:white;padding:18px;display:flex;gap:20px;font-size:10px}.preflight-empty footer strong{color:#8ba4ff;font:500 10px 'DM Mono'}.preflight-results header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--ink);padding-bottom:20px}.preflight-results header>div:first-child{display:flex;flex-direction:column;gap:8px}.preflight-results header b{font-size:14px}.score{display:flex;align-items:baseline}.score strong{font:900 72px/1 'Noto Sans JP';letter-spacing:-.08em}.score small{font:10px 'DM Mono'}.score-good{color:#0b6b4f}.score-warn{color:#c75c1f}.score-bad{color:#c62f25}.verdict{padding:28px 0}.verdict span{font-size:10px;font-weight:700}.verdict h2{font-size:38px;letter-spacing:-.05em;margin:5px 0}.verdict p{font-size:11px;color:#68645c}.finding-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.finding-grid article{border:1px solid var(--line);padding:18px;background:white}.finding-grid article.warn{border-top:5px solid var(--red)}.finding-grid article.pass{border-top:5px solid #3a9c6d}.finding-grid i{font:500 9px 'DM Mono';font-style:normal}.finding-grid h3{margin:12px 0 5px;font-size:16px}.finding-grid p{font-size:10px;line-height:1.6}.slide-risks{margin-top:26px}.slide-risks>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:9px}.slide-risks>div b{font-size:11px}.slide-risks>p{margin:0;display:grid;grid-template-columns:45px 1fr 60px;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:11px 5px;font-size:10px}.slide-risks>p strong{font:500 10px 'DM Mono'}.slide-risks>p i{text-align:right;font-style:normal;font-weight:700}.slide-risks>p.has-risk i{color:var(--red)}.slide-risks>p.is-clear i{color:#16804f}.preflight-results>footer{margin-top:28px}.preflight-results>footer strong{color:#ff9a87}.preflight-results>footer span{color:#ccc}
.preflight-card{margin:14px 0;padding:16px;border:1px solid #c9c4b7;background:#fff;border-radius:4px}.preflight-card>div{display:flex;align-items:baseline;gap:5px;color:#0b6b4f;font-size:10px;letter-spacing:.12em}.preflight-card>div strong{margin-left:auto;font-size:34px;letter-spacing:-.06em;color:#17211b}.preflight-card>div small{color:#777}.preflight-card h3{margin:3px 0 12px;font-size:16px}.preflight-card p{display:flex;gap:9px;margin:7px 0;font-size:12px}.preflight-card p>b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#cbea9b;color:#17211b}.preflight-card p.warn>b{background:#f36f45;color:#fff}.preflight-card p span{font-weight:700}.preflight-card p small{display:block;margin-top:2px;color:#777;font-weight:400}.preflight-card em{display:block;margin-top:12px;padding-top:9px;border-top:1px solid #e5e1d8;font-size:9px;color:#777;font-style:normal}
:root{font-family:'Noto Sans JP',sans-serif;color:#12120f;background:#f1efe7;font-synthesis:none;--ink:#12120f;--paper:#f7f5ee;--blue:#2457ff;--red:#ff553e;--line:#cbc7ba}*{box-sizing:border-box}body{margin:0;background:var(--paper)}button,input,textarea,select{font:inherit}button,a{color:inherit}.topbar{height:68px;padding:0 28px;display:flex;align-items:center;border-bottom:1px solid var(--ink);justify-content:space-between;background:var(--paper);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:18px;text-decoration:none}.brand span,.kicker,.status,.panel-title span,.editor-head span,.filmstrip>button>span{font:500 10px 'DM Mono';letter-spacing:.12em}.brand b{font-size:17px}.status{margin-left:auto;margin-right:24px}.status i,.quality-strip i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#3de082;margin-right:7px}.ghost{background:none;border:1px solid var(--ink);padding:8px 14px}.hero{padding:42px 30px 36px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--ink)}.hero h1{font-size:clamp(42px,6vw,86px);line-height:1.02;letter-spacing:-.07em;margin:12px 0 0;font-weight:900}.hero h1 em{font-style:normal;color:var(--blue)}.hero p{font-size:13px;line-height:2;margin:0 0 8px;max-width:430px}.steps{height:92px;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ink);position:relative}.steps button{border:0;border-right:1px solid var(--line);background:transparent;text-align:left;padding:18px 24px;font:500 12px 'DM Mono';letter-spacing:.08em}.steps button span{display:block;color:#8c887f;font-size:9px;margin-bottom:11px}.steps button.active{background:var(--ink);color:white}.steps button.done{color:var(--blue)}.progress{position:absolute;bottom:-1px;left:0;height:4px;background:var(--blue);width:var(--progress);transition:.3s}.studio{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:670px;border-bottom:1px solid var(--ink)}.source-panel{padding:22px;border-right:1px solid var(--ink);background:#e8e4d9}.panel-title,.editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-title b{font-size:12px}.dropzone{width:100%;height:145px;background:var(--paper);border:1px dashed #777268;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.dropzone:hover{border-style:solid;box-shadow:5px 5px 0 var(--blue)}.dropzone input{display:none}.dropzone .plus{font-size:27px;color:var(--blue)}.dropzone strong{font-size:12px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropzone small{font:9px 'DM Mono';margin-top:7px;color:#716d64}.source-panel label{display:block;font-size:10px;font-weight:700;margin-top:20px}.source-panel select,.source-panel textarea{width:100%;margin-top:8px;border:1px solid var(--line);background:var(--paper);padding:11px;font-size:11px;resize:none}.source-facts{margin-top:24px;border-top:1px solid var(--ink);padding-top:14px}.source-facts>span{font:10px 'DM Mono'}.source-facts p{font-size:10px;display:flex;gap:10px;align-items:center}.source-facts p i{font-style:normal;color:var(--blue);font:9px 'DM Mono'}.editor{background:#d8d4c9;padding:20px 26px 16px;min-width:0}.editor-head{height:34px}.editor-head>div:first-child{display:flex;flex-direction:column;gap:5px}.editor-head b{font-size:10px}.export-actions{display:flex;gap:7px}.export-actions a{text-decoration:none;font-size:10px;border:1px solid var(--ink);padding:8px 12px;background:var(--paper)}.export-actions .primary{background:var(--blue);border-color:var(--blue);color:white}.slide-canvas{aspect-ratio:16/9;background:#f7f5ee;position:relative;overflow:hidden;padding:5.2% 5.6%;box-shadow:0 18px 50px #28251d22}.slide-grid{position:absolute;inset:0;background-image:linear-gradient(#1110 95%,#1111 95%),linear-gradient(90deg,#1110 95%,#1111 95%);background-size:5% 5%;opacity:.18}.slide-meta{position:relative;display:flex;justify-content:space-between;font:500 clamp(7px,1vw,11px) 'DM Mono';color:var(--blue);letter-spacing:.1em}.slide-canvas h2{position:relative;font-size:clamp(20px,3.4vw,51px);line-height:1.08;letter-spacing:-.055em;margin:5% 0 0;max-width:82%;white-space:normal}.slide-body{position:relative;font-size:clamp(8px,1vw,14px);line-height:1.8;max-width:67%;color:#58564f;margin-top:3%}.slide-canvas footer{position:absolute;left:5.6%;right:5.6%;bottom:5%;border-top:1px solid var(--ink);padding-top:2%;display:flex;justify-content:space-between;font-size:clamp(7px,.9vw,13px);font-weight:700}.slide-canvas footer small{font:500 clamp(5px,.6vw,9px) 'DM Mono';letter-spacing:.1em}.cover-orbit{position:absolute;right:7%;bottom:17%;width:25%;aspect-ratio:1;border:2px solid var(--blue);border-radius:50%}.cover-orbit:after,.cover-orbit:before{content:"";position:absolute;border-radius:50%}.cover-orbit:before{inset:18%;background:var(--blue)}.cover-orbit:after{width:26%;aspect-ratio:1;background:var(--red);right:-6%;top:14%}.process-line{position:absolute;left:6%;right:6%;bottom:24%;display:flex;align-items:center;justify-content:space-between}.process-line i{font:500 clamp(7px,1vw,13px) 'DM Mono';font-style:normal;border:1px solid var(--ink);padding:2% 3%;background:white}.process-line b{color:var(--blue)}.contrast{position:absolute;left:6%;right:6%;bottom:20%;display:flex;align-items:center;gap:3%}.contrast span{flex:1;padding:3%;background:white;font-weight:800;font-size:clamp(9px,1.4vw,20px)}.contrast span:last-child{background:var(--blue);color:white}.contrast small{font-size:.55em;font-weight:500}.contrast strong{font:500 10px 'DM Mono'}.proof-number{position:absolute;right:8%;bottom:17%;display:flex;align-items:flex-end}.proof-number b{font:900 clamp(55px,11vw,160px)/.75 'Noto Sans JP';color:var(--red);letter-spacing:-.1em}.proof-number span{font:500 clamp(7px,.9vw,12px)/1.3 'DM Mono';margin-left:8px}.cta-stamp{position:absolute;right:8%;bottom:18%;background:var(--red);color:white;border-radius:50%;width:22%;aspect-ratio:1;display:grid;place-items:center;text-align:center;transform:rotate(8deg);font:800 clamp(8px,1.4vw,18px)/1.15 'DM Mono'}.revision-bar{height:56px;background:var(--ink);display:grid;grid-template-columns:48px 1fr auto;color:white}.revision-bar span{display:grid;place-items:center;font:10px 'DM Mono';border-right:1px solid #ffffff33}.revision-bar input{border:0;background:transparent;color:white;padding:0 16px;font-size:11px;outline:none}.revision-bar button{border:0;background:var(--blue);color:white;padding:0 18px;font-size:10px;font-weight:700}.revision-bar button:disabled{opacity:.6}.quality-strip{display:flex;gap:24px;margin-top:13px;font:9px 'DM Mono';white-space:nowrap;overflow:hidden}.filmstrip{padding:20px 24px 32px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;background:#161613}.filmstrip button{padding:0;border:1px solid #ffffff22;background:none;text-align:left;color:white;cursor:pointer;min-width:0}.filmstrip button.selected{border-color:#6c8bff;box-shadow:0 0 0 2px var(--blue)}.filmstrip .slide-canvas{box-shadow:none;padding:7%}.filmstrip .slide-canvas h2{font-size:9px}.filmstrip .slide-body,.filmstrip .slide-canvas footer,.filmstrip .process-line,.filmstrip .contrast,.filmstrip .proof-number span{display:none}.filmstrip .cover-orbit,.filmstrip .cta-stamp{opacity:.7}.filmstrip>button>span{display:block;padding:9px;color:#aaa}@media(max-width:900px){.hero{display:block}.hero p{margin-top:24px}.studio{grid-template-columns:1fr}.source-panel{border-right:0;border-bottom:1px solid var(--ink)}.source-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.panel-title,.source-facts{grid-column:1/-1}.filmstrip{grid-template-columns:repeat(3,1fr)}.status{display:none}}@media(max-width:600px){.topbar{padding:0 16px}.ghost{display:none}.hero{padding:28px 16px}.hero h1{font-size:46px}.steps{height:70px}.steps button{padding:14px 10px;font-size:9px}.studio{display:block}.source-panel{display:block;padding:16px}.editor{padding:14px 10px}.editor-head{height:auto;align-items:flex-end}.editor-head b{display:none}.export-actions a{padding:7px;font-size:8px}.revision-bar{grid-template-columns:34px 1fr}.revision-bar button{padding:0 8px;font-size:8px}.quality-strip{gap:12px}.filmstrip{grid-template-columns:repeat(2,1fr);padding:14px}.slide-canvas h2{max-width:95%}.slide-body{max-width:80%}}