.hero { width:min(900px,calc(100% - var(--page-gutter))); margin:auto; padding:72px 0 54px; text-align:center; }
    .hero-tag,.eyebrow { color:var(--lime); font:500 var(--type-label) var(--font-mono); letter-spacing:.13em; text-transform:uppercase; }
    .hero h1 { margin:17px 0; font-size:var(--type-program-hero-title); line-height:.98; letter-spacing:-.07em; } .hero h1 em { color:var(--lime); font-style:normal; }
    .hero p { max-width:650px; margin:0 auto; color:var(--muted); line-height:1.7; }
    .shell { width:min(var(--page-width),calc(100% - var(--page-gutter))); margin:0 auto 100px; border:1px solid var(--line); border-radius:24px; background:rgba(14,21,23,.76); overflow:hidden; }
    .workspace { padding:clamp(24px,5vw,60px); }
    .topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:30px; } .topbar h2 { margin:7px 0 0; font-size:var(--type-program-title); letter-spacing:-.045em; }
    .button { font-weight:700; }
    .config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
    .panel { padding:18px; }
    .panel-heading { display:flex; align-items:flex-start; gap:11px; }
    .panel-heading > div { min-width:0; }
    .setting-step { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(52,211,153,.32); border-radius:9px; background:rgba(52,211,153,.07); color:var(--lime); font:500 var(--type-label) var(--font-mono); }
    .panel h3 { margin:0 0 3px; font-size:var(--type-card-title); }
    .help { margin:0; color:var(--muted); font-size:var(--type-help); line-height:1.45; }
    .timer-layout { display:grid; grid-template-columns:minmax(178px,.85fr) minmax(200px,1.15fr); gap:16px; margin-top:16px; }
    .time-row { display:flex; align-items:flex-end; gap:8px; margin:0; }
    .time-field { display:grid; gap:6px; }
    .time-field label { color:#A4B0BE; font-size:var(--type-label); font-weight:700; }
    .time-field input { width:76px; height:50px; padding:0 9px; border:1px solid #2A3442; border-radius:9px; background:#0c1417; color:var(--ink); font:500 var(--type-card-title) var(--font-mono); text-align:center; }
    .time-separator { padding-bottom:11px; color:var(--lime); font:var(--type-card-title) var(--font-mono); }
    .duration-note { margin:9px 0 0; color:#34D399; font:var(--type-help) var(--font-mono); }
    .representation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:16px; }
    .representation { min-height:108px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#0c1315; color:var(--muted); cursor:pointer; text-align:left; }
    .representation strong,.representation span { display:block; } .representation strong { margin-bottom:5px; color:var(--ink); font-size:var(--type-body); } .representation span { font-size:var(--type-help); line-height:1.45; }
    .representation[aria-pressed="true"] { border-color:rgba(52,211,153,.6); background:rgba(52,211,153,.1); }
    .start-mode { min-width:0; margin:0; padding:0 0 0 16px; border:0; border-left:1px solid var(--line); }
    .start-mode legend { padding:0; color:var(--muted); font-size:var(--type-label); font-weight:700; }
    .start-mode-options { display:grid; gap:7px; margin-top:8px; }
    .start-option { min-height:56px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#0c1315; color:var(--muted); cursor:pointer; text-align:left; }
    .start-option strong,.start-option span { display:block; }
    .start-option strong { margin-bottom:2px; color:var(--ink); font-size:var(--type-body); }
    .start-option span { font-size:var(--type-help); line-height:1.35; }
    .start-option[aria-pressed="true"] { border-color:var(--lime); background:rgba(52,211,153,.1); }
    .direction-options { display:flex; flex-wrap:wrap; gap:7px; }
    .direction-option { min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#0c1315; color:var(--muted); cursor:pointer; font-size:var(--type-button); font-weight:700; }
    .direction-option[aria-pressed="true"] { border-color:var(--lime); background:rgba(52,211,153,.1); color:var(--ink); }
    #status { margin:12px 0 0; }
    @media (max-width:1000px) { .config-grid { grid-template-columns:1fr; } }
    @media (max-width:760px) { .matrix { min-width:520px; } }
    @media (max-width:560px) { .timer-layout,.representation-grid { grid-template-columns:1fr; } .start-mode { padding:14px 0 0; border-top:1px solid var(--line); border-left:0; } .start-mode-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .panel { padding:16px; } }