:root{--ink:#111;--dark:#242424;--mid:#666;--soft:#f3f3f3;--line:#d8d8d8;--paper:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#ededed;color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.55}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px max(24px,calc((100vw - 1200px)/2));background:rgba(17,17,17,.96);color:white;box-shadow:0 4px 20px rgba(0,0,0,.18)}.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-weight:850;letter-spacing:-.02em}.brand span{display:grid;place-items:center;width:34px;height:34px;background:white;color:#111;border-radius:8px;font-size:.85rem}.topbar nav{display:flex;gap:4px}.nav-btn{border:0;border-radius:8px;padding:9px 12px;background:transparent;color:#aaa;font-size:.88rem;font-weight:750}.nav-btn:hover,.nav-btn.active{background:#333;color:white}
main,footer{max-width:1200px;margin:auto}.intro{display:grid;grid-template-columns:1.5fr .8fr;gap:60px;align-items:end;padding:76px 24px 58px}.eyebrow,.mini,.step{font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;color:#555}h1{font-size:clamp(2.7rem,6vw,5.6rem);line-height:.97;letter-spacing:-.065em;margin:0;max-width:900px}.intro-copy{font-size:1.05rem;color:#555;margin:0;max-width:470px}
.view{display:none;padding:0 24px 78px}.view.active{display:block}.section-heading{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:end;background:#111;color:white;border-radius:22px 22px 0 0;padding:34px}.section-heading h2{font-size:clamp(2rem,4vw,3.7rem);line-height:1;letter-spacing:-.05em;margin:0}.section-heading .step{color:#aaa}.section-heading>p{color:#bbb;margin:0}
.portfolio-layout{display:grid;grid-template-columns:340px 1fr;background:white;border:1px solid var(--line)}.page-map{background:#292929;color:white;padding:30px}.page-map h3{margin:0 0 20px}.page-map ol{margin:0;padding:0;list-style:none;counter-reset:pages}.page-map li{counter-increment:pages;display:grid;grid-template-columns:32px 1fr;gap:0 10px;border-top:1px solid #454545;padding:13px 0}.page-map li:before{content:counter(pages,decimal-leading-zero);grid-row:1/3;color:#888;font-size:.78rem;font-weight:800}.page-map strong{font-size:.93rem}.page-map span{color:#aaa;font-size:.78rem;line-height:1.35}.content-panel{padding:30px}.role-picker{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:26px}.role-picker label{font-weight:800}.role-picker select{min-width:270px}.field select,.field input,.field textarea,.role-picker select{border:1px solid #cfcfcf;border-radius:10px;background:white;padding:12px 13px;color:#111;width:100%;outline:none}.field input:focus,.field textarea:focus,.field select:focus,.role-picker select:focus{border-color:#111;box-shadow:0 0 0 3px rgba(0,0,0,.08)}.role-title{display:flex;justify-content:space-between;gap:18px;align-items:start}.role-title h3{font-size:1.8rem;letter-spacing:-.035em;margin:0}.level{font-size:.76rem;background:#eee;padding:6px 9px;border-radius:999px;white-space:nowrap}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.guide-block h4{font-size:.77rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}.guide-block ul{padding-left:18px;margin:0;color:#555}.guide-block li{margin:7px 0}.sample-project{grid-column:1/-1;background:#f2f2f2;border-left:4px solid #111;border-radius:0 12px 12px 0;padding:20px}.sample-project h4{margin:0 0 6px}.sample-project p{margin:0;color:#555}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ccc;border:1px solid #ccc;border-radius:0 0 22px 22px;overflow:hidden}.rule{background:#fafafa;padding:26px}.rule span{font-size:.7rem;font-weight:900;letter-spacing:.13em;color:#777}.rule.do{background:#111;color:white}.rule.do span,.rule.do p{color:#aaa}.rule h3{font-size:1.05rem;margin:8px 0}.rule p{font-size:.88rem;color:#666;margin:0}
.builder{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);background:white}.form-panel{padding:30px;border-right:1px solid var(--line)}.field{margin-bottom:17px}.field label{display:block;font-size:.83rem;font-weight:800;margin-bottom:6px}.field textarea{resize:vertical}.primary{border:0;border-radius:10px;background:#111;color:white;font-weight:850;padding:13px 18px;width:100%}.primary:hover{background:#383838}.output-panel{padding:30px;background:#f7f7f7;display:flex;flex-direction:column}.output-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.output-head h3{margin:0;font-size:1.45rem}.secondary{border:1px solid #bbb;border-radius:9px;background:white;color:#111;padding:9px 13px;font-weight:800}.secondary:hover{background:#111;color:white;border-color:#111}.letter-output{white-space:pre-wrap;background:white;border:1px solid var(--line);border-radius:12px;padding:24px;margin-top:20px;min-height:380px;line-height:1.65}.empty-output{color:#888;display:grid;place-items:center;text-align:center}.editor-note{font-size:.8rem;color:#666;margin:auto 0 0;padding-top:16px}.templates{background:white;border:1px solid var(--line);border-top:0;padding:30px;border-radius:0 0 22px 22px}.subheading{display:flex;justify-content:space-between;gap:20px;align-items:end}.subheading h3{font-size:1.6rem;margin:0}.subheading p{color:#666;margin:0}.template-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 12px}.template-tab{border:1px solid #ccc;background:white;border-radius:999px;padding:8px 13px;font-weight:750}.template-tab.active{background:#111;color:white;border-color:#111}.template-card{background:#f2f2f2;border-radius:12px;padding:22px}.template-card p{white-space:pre-wrap;color:#444}.template-card .secondary{margin-top:12px}
.check-layout{display:grid;grid-template-columns:1fr 330px;background:white;border:1px solid var(--line);border-radius:0 0 22px 22px;overflow:hidden}.checklist-items{padding:28px}.check-item{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:17px 0;border-bottom:1px solid #e5e5e5;cursor:pointer}.check-item:last-child{border:0}.check-item input{width:21px;height:21px;accent-color:#111;margin-top:2px}.check-item strong{display:block}.check-item span{font-size:.86rem;color:#666}.check-item:has(input:checked) strong{text-decoration:line-through;color:#777}.progress-card{background:#222;color:white;padding:30px;display:flex;flex-direction:column;align-items:start}.progress-card .mini{color:#aaa}.score{font-size:5rem;font-weight:900;line-height:1;letter-spacing:-.07em;margin:22px 0}.score small{font-size:1.3rem;letter-spacing:0}.progress-track{width:100%;height:8px;background:#444;border-radius:99px;overflow:hidden}.progress-track div{height:100%;width:0;background:white;transition:width .25s}.progress-card>p:not(.mini){color:#bbb;font-size:.9rem}.progress-card .secondary{margin-top:auto}
footer{padding:32px 24px 60px;border-top:1px solid #ccc;color:#555}footer strong{color:#111}footer p{max-width:720px;font-size:.82rem}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#111;color:white;border-radius:999px;padding:10px 16px;font-weight:750;opacity:0;pointer-events:none;transition:.2s;z-index:50}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.intro,.section-heading{grid-template-columns:1fr;gap:20px}.portfolio-layout,.builder,.check-layout{grid-template-columns:1fr}.page-map{display:none}.form-panel{border-right:0;border-bottom:1px solid var(--line)}.rules-grid{grid-template-columns:1fr}.rule{border-bottom:1px solid #ccc}.progress-card{min-height:360px}.role-picker{align-items:stretch;flex-direction:column}.role-picker select{min-width:0}.guide-grid{grid-template-columns:1fr}.sample-project{grid-column:1}.topbar{align-items:flex-start;flex-direction:column;gap:9px;padding:12px 16px}.topbar nav{width:100%;overflow-x:auto}.nav-btn{white-space:nowrap}.intro{padding-top:48px}}@media(max-width:520px){.intro,.view{padding-left:14px;padding-right:14px}.section-heading,.content-panel,.form-panel,.output-panel,.templates,.checklist-items,.progress-card{padding:22px}.subheading{align-items:start;flex-direction:column}.letter-output{padding:17px}.role-title{flex-direction:column}}