.expansion-intro { position:relative; overflow:hidden; }
.expansion-intro::after { content:""; position:absolute; right:8%; bottom:-95px; width:240px; height:240px; border:1px solid rgba(24,32,28,.15); border-radius:50%; box-shadow:0 0 0 38px rgba(24,32,28,.025),0 0 0 76px rgba(24,32,28,.018); pointer-events:none; }
.creative-intro::after { border-radius:0; transform:rotate(18deg); }
.desk-stamp { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 15px; min-width:210px; padding:20px 22px; background:#f2c94c; border:1px solid var(--ink); box-shadow:8px 8px 0 var(--ink); transform:rotate(1.5deg); }
.desk-stamp b { grid-row:1/3; font:900 58px/1 ui-monospace,monospace; }
.desk-stamp span { font:850 13px/1.15 ui-monospace,monospace; letter-spacing:.1em; }
.desk-stamp small { grid-column:1/-1; margin-top:14px; padding-top:10px; border-top:1px solid currentColor; font-size:9px; }
.desk-stamp.dark { color:var(--card); background:#20352b; }
.expansion-shell { border-color:var(--ink); }
.expansion-nav { overflow-x:auto; scrollbar-width:thin; }
.expansion-nav a { flex:0 0 auto; }
.grouped-tool-nav { display:flex; align-items:stretch; padding:0; }
.tool-nav-group { flex:0 0 auto; min-width:max-content; border-right:2px solid var(--ink); }
.tool-nav-group:last-child { border-right:0; }
.tool-nav-group>span { display:block; padding:6px 11px; color:var(--muted); background:#ddd7ca; border-bottom:1px solid var(--line); font:800 7px ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }
.tool-nav-group>div { display:flex; height:42px; }
.tool-nav-group a { display:grid; place-items:center; min-width:92px; padding:8px 11px; border-right:1px solid var(--line); font-size:10px; }
.tool-nav-group a:last-child { border-right:0; }
.tool-nav-group a.active { color:#fff; background:var(--ink); }
.expansion-panel { min-height:520px; background:rgba(255,253,247,.72); }
.section-kicker { margin:0 0 8px !important; color:var(--green) !important; font:800 9px/1.2 ui-monospace,monospace !important; letter-spacing:.16em; }
.split-lab,.visual-generator,.timer-stage,.subnet-board,.ratio-board,.date-board,.url-workbench { display:grid; min-height:540px; }
.split-lab { grid-template-columns:.82fr 1.18fr; }
.lab-controls,.password-result { padding:38px; }
.lab-controls { border-right:1px solid var(--ink); }
.lab-controls h2,.visual-controls h2,.converter-board h2,.date-board h2,.url-workbench h2,.subnet-board h2,.ratio-board h2 { margin:0 0 25px; font:800 30px/1.15 "STKaiti","KaiTi",serif; }
.range-field { display:grid; grid-template-columns:1fr auto; gap:8px; margin:20px 0; font-size:10px; font-weight:750; }
.range-field input { grid-column:1/-1; width:100%; accent-color:var(--green); }
.range-field output { color:var(--green); font:800 10px ui-monospace,monospace; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:24px 0; }
.check-grid label,.switch-line { display:flex; align-items:center; gap:8px; padding:10px; background:var(--paper); border:1px solid var(--line); font-size:10px; font-weight:700; }
.check-grid .wide-check { grid-column:1/-1; }
.check-grid input,.switch-line input { accent-color:var(--green); }
.password-result { display:grid; align-content:center; gap:20px; background:#20352b; color:var(--card); }
.password-result > span { color:#f2c94c; font:800 10px ui-monospace,monospace; letter-spacing:.12em; }
.password-result code { padding:25px; overflow-wrap:anywhere; color:#fff; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.25); font:750 clamp(20px,3vw,38px)/1.4 ui-monospace,monospace; cursor:pointer; }
.password-result p { color:#bec9c2; font-size:10px; line-height:1.7; }
.strength-track { height:8px; background:rgba(255,255,255,.12); }
.strength-track i { display:block; width:0; height:100%; background:#f2c94c; transition:width .25s ease; }
.random-result { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; padding:20px; overflow:auto; }
.random-result article { padding:18px; background:var(--paper); border:1px solid var(--ink); box-shadow:3px 3px 0 var(--line); }
.random-result h3 { margin:0 0 12px; color:var(--green); font:800 11px ui-monospace,monospace; }
.random-result ol { margin:0; padding-left:24px; }
.random-result li { padding:5px 0; border-bottom:1px dashed var(--line); font-size:11px; }
.timer-stage { grid-template-columns:1.25fr .75fr; background:#20352b; color:var(--card); }
.timer-clock { display:grid; align-content:center; justify-items:center; padding:40px; border-right:1px solid #627269; }
.timer-clock > p { margin:0; color:#f2c94c; font:800 11px ui-monospace,monospace; letter-spacing:.18em; }
.timer-clock time { margin:26px 0; font:900 clamp(72px,11vw,150px)/.9 ui-monospace,monospace; letter-spacing:-.08em; }
.timer-progress { width:min(560px,90%); height:7px; background:rgba(255,255,255,.12); }
.timer-progress i { display:block; width:0; height:100%; background:#f2c94c; transition:width .2s linear; }
.timer-actions { display:flex; gap:8px; margin-top:28px; }
.timer-stage button { color:var(--card); border-color:#87958e; background:transparent; }
.timer-stage .primary-button { color:var(--ink); background:#f2c94c; border-color:#f2c94c; }
.timer-settings { display:grid; align-content:center; gap:14px; padding:35px; background:#172b22; }
.timer-settings h2 { margin:0 0 8px; font:800 27px "STKaiti","KaiTi",serif; }
.timer-settings .wide-field input { color:var(--ink); }
.timer-settings .switch-line { color:#dbe4de; }
.timer-settings-heading { display:flex; align-items:start; justify-content:space-between; gap:14px; }
.timer-settings-heading .primary-button { flex:0 0 auto; }
.timer-duration-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.timer-duration-grid fieldset { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0; padding:10px; border:1px solid #627269; }
.timer-duration-grid legend { padding:0 5px; color:#f2c94c; font:800 9px ui-monospace,monospace; }
.timer-duration-grid label { display:grid; gap:4px; color:#b7c3bc; font-size:8px; }
.timer-duration-grid input { min-width:0; width:100%; padding:8px 4px; color:var(--ink); border:1px solid #87958e; background:#fff; }
.timer-sound-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.timer-sound-grid label { display:grid; gap:5px; padding:10px; border:1px solid #627269; color:#dbe4de; font-size:9px; }
.timer-sound-grid input { min-width:0; max-width:100%; font-size:8px; }
.timer-sound-grid small,.local-privacy-note { margin:0; color:#9eaea5; font:8px/1.6 ui-monospace,monospace; }
.session-count { display:flex; align-items:center; gap:15px; margin-top:16px; padding-top:20px; border-top:1px solid #627269; }
.session-count b { color:#f2c94c; font:900 46px ui-monospace,monospace; }
.session-count span { color:#b7c3bc; font-size:9px; line-height:1.5; }
.converter-board { min-height:520px; padding:38px; align-content:center; background:linear-gradient(135deg,#f8f4e9,#e4eadf); }
.converter-board > header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:38px; }
.converter-board header label { display:grid; gap:6px; font-size:9px; font-weight:750; }
.converter-board select,.converter-board input,.date-board input,.url-workbench input { padding:10px; border:1px solid var(--ink); background:var(--card); }
.converter-pair { display:grid; grid-template-columns:1fr 52px 1fr; align-items:end; gap:18px; }
.converter-pair > label { display:grid; grid-template-columns:1fr auto; gap:8px; }
.converter-pair > label span { grid-column:1/-1; color:var(--muted); font-size:9px; }
.converter-pair input { min-width:0; font:800 28px ui-monospace,monospace; }
.converter-pair select { max-width:155px; }
.converter-pair > button { width:52px; height:52px; padding:0; border-radius:50%; color:#fff; background:var(--green); font-size:22px; }
.formula-note { margin:34px 0 0; padding:13px; color:var(--muted); background:rgba(255,255,255,.52); border-left:3px solid var(--green); font:10px/1.6 ui-monospace,monospace; }
.percentage-grid { display:grid; grid-template-columns:repeat(3,1fr); min-height:520px; }
.percentage-grid article { display:flex; flex-direction:column; padding:32px; border-right:1px solid var(--ink); }
.percentage-grid article:last-child { border:0; }
.percentage-grid article > span { color:var(--orange); font:900 12px ui-monospace,monospace; }
.percentage-grid h2 { min-height:60px; margin:16px 0 28px; font:800 24px/1.2 "STKaiti","KaiTi",serif; }
.formula-inputs { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.formula-inputs input,.formula-inputs select { min-width:0; flex:1; height:42px; padding:8px; border:1px solid var(--line); background:var(--paper); }
.formula-inputs b { font-size:11px; }
.percentage-grid output { margin-top:auto; padding-top:38px; color:var(--green); overflow-wrap:anywhere; font:900 clamp(35px,5vw,70px)/1 ui-monospace,monospace; }
.date-board { grid-template-columns:.85fr 1.15fr; }
.date-board > section { padding:38px; }
.date-board > section:first-child { border-right:1px solid var(--ink); }
.date-inputs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0 15px; }
.date-inputs label,.date-offset div { display:grid; gap:6px; font-size:9px; font-weight:750; }
.date-results { display:grid; grid-template-columns:repeat(3,1fr); align-content:center; gap:12px; background:#20352b; color:var(--card); }
.date-results article { padding:20px 12px; border:1px solid #6d7b74; text-align:center; }
.date-results b { display:block; color:#f2c94c; font:900 25px ui-monospace,monospace; }
.date-results span { color:#b8c3bd; font-size:9px; }
.date-results p { grid-column:1/-1; margin:10px 0 0; text-align:center; font-size:10px; }
.date-offset { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:20px 38px; border-top:1px solid var(--ink); background:var(--paper-deep); }
.date-offset h3 { margin:0; font:800 20px "STKaiti","KaiTi",serif; }
.date-offset div { grid-template-columns:1fr 90px auto auto; align-items:center; }
.date-offset output { color:var(--green); font:800 13px ui-monospace,monospace; }
.stats-dashboard { padding:25px; overflow:auto; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric-grid article { padding:18px; background:var(--paper); border:1px solid var(--line); }
.metric-grid b { display:block; color:var(--green); font:900 27px ui-monospace,monospace; }
.metric-grid span { font-size:9px; }
.stats-dashboard > section { margin-top:22px; }
.stats-dashboard > section header { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--ink); }
.stats-dashboard h3 { margin:0 0 10px; font:800 21px "STKaiti","KaiTi",serif; }
.stats-dashboard header span { margin-bottom:10px; color:var(--muted); font-size:9px; }
.stats-options { padding:16px; background:var(--paper); border:1px solid var(--line); }
.stats-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.stats-option-grid>label:not(.switch-line) { display:grid; gap:5px; color:var(--muted); font-size:9px; }
.stats-option-grid input[type=number],.stats-query input { min-width:0; padding:8px; border:1px solid var(--line); background:var(--card); }
.stats-options>.wide-field { margin-top:12px; }
.stats-options textarea { min-height:70px; }
.stats-query { display:grid; grid-template-columns:1fr auto; }
.stats-query output { display:grid; place-items:center; min-width:70px; padding:8px; color:#fff; background:var(--green); font:800 10px ui-monospace,monospace; }
.frequency-list { display:flex; flex-wrap:wrap; gap:8px; padding:20px 0; }
.frequency-list > span { display:flex; gap:8px; padding:8px 10px; background:#e1e9df; border:1px solid #afc0b2; font-size:10px; }
.frequency-list b { color:var(--green); }
.markdown-preview { min-height:440px; max-height:620px; padding:28px; overflow:auto; line-height:1.8; }
.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4 { margin:1.2em 0 .45em; font-family:"STKaiti","KaiTi",serif; line-height:1.25; }
.markdown-preview h1 { padding-bottom:8px; border-bottom:2px solid var(--ink); font-size:32px; }
.markdown-preview h2 { font-size:25px; }
.markdown-preview p,.markdown-preview li { font-size:12px; }
.markdown-preview blockquote { margin:18px 0; padding:12px 16px; color:#425249; background:#e2eadf; border-left:4px solid var(--green); }
.markdown-preview pre { padding:18px; overflow:auto; color:#e8efe9; background:#20352b; }
.markdown-preview :not(pre)>code { padding:2px 5px; background:#eee8dc; border:1px solid var(--line); }
.markdown-preview a { color:var(--green); }
.markdown-preview table { display:block; width:100%; margin:18px 0; overflow:auto; border-collapse:collapse; }
.markdown-preview th,.markdown-preview td { min-width:110px; padding:9px 12px; border:1px solid var(--line); font-size:11px; }
.markdown-preview th { color:#fff; background:var(--green); }
.markdown-preview tr:nth-child(even) td { background:var(--paper); }
.markdown-preview .task-item { display:flex; align-items:center; gap:8px; list-style:none; }
.markdown-preview .task-item input { accent-color:var(--green); }
.url-workbench { grid-template-columns:.8fr 1.2fr; }
.url-workbench > section { padding:32px; }
.url-workbench > section:first-child { border-right:1px solid var(--ink); }
.url-workbench textarea { min-height:150px; border:1px solid var(--line); }
.url-parts { display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:9px; background:#20352b; }
.url-parts > div { padding:15px; border:1px solid #66766e; color:var(--card); }
.url-parts > .wide { grid-column:1/-1; }
.url-parts b { display:block; margin-bottom:7px; color:#f2c94c; font-size:9px; }
.url-parts code { overflow-wrap:anywhere; font-size:10px; }
.url-query { grid-column:1/-1; border-top:1px solid var(--ink); }
.url-query header { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.url-query h3 { margin:0; font:800 21px "STKaiti","KaiTi",serif; }
.url-param-list { display:grid; gap:7px; }
.url-param-row { display:grid; grid-template-columns:.7fr 1.3fr 38px; gap:7px; }
.url-param-row button { padding:0; }
.unicode-layout { display:grid; grid-template-columns:.68fr 1.32fr; min-height:540px; }
.unicode-table-wrap { padding:20px; overflow:auto; border-left:1px solid var(--ink); }
.unicode-table { width:100%; border-collapse:collapse; font-size:10px; }
.unicode-table th,.unicode-table td { padding:9px; border-bottom:1px solid var(--line); text-align:left; }
.unicode-table th { position:sticky; top:0; z-index:1; color:var(--card); background:#20352b; }
.unicode-table td:first-child { font-size:20px; }
.subnet-board { grid-template-columns:.72fr 1.28fr; }
.subnet-board > section { padding:38px; }
.subnet-board > section:first-child { border-right:1px solid var(--ink); }
.subnet-board section > p { color:var(--muted); font-size:10px; line-height:1.7; }
.ip-entry { display:grid; grid-template-columns:1fr auto 72px; align-items:center; gap:8px; margin:25px 0; }
.ip-entry input { min-width:0; padding:13px; border:1px solid var(--ink); font:750 18px ui-monospace,monospace; }
.subnet-results { display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:10px; background:#e3eadf; }
.subnet-results article { padding:18px; background:rgba(255,255,255,.55); border:1px solid var(--line); }
.subnet-results span { display:block; margin-bottom:8px; color:var(--muted); font-size:9px; }
.subnet-results code { overflow-wrap:anywhere; color:var(--green); font:800 13px ui-monospace,monospace; }
.set-inputs { display:grid; grid-template-columns:1fr 1fr; }
.set-inputs section:first-child { border-right:1px solid var(--ink); }
.set-inputs header { display:flex; justify-content:space-between; padding:12px 15px; background:var(--paper-deep); border-bottom:1px solid var(--ink); font-size:10px; }
.set-inputs textarea { min-height:260px; }
.set-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:11px 14px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.set-toolbar label { margin-right:auto; font-size:10px; }
.result-tabs { display:flex; gap:6px; padding:11px 14px; overflow:auto; }
.result-tabs button { flex:0 0 auto; }
.result-tabs button.active { color:#fff; background:var(--ink); }
.set-workbench > textarea { min-height:180px; border-top:1px solid var(--ink); }
.visual-generator { grid-template-columns:.72fr 1.28fr; }
.visual-controls { padding:36px; border-right:1px solid var(--ink); }
.color-stop { display:grid; grid-template-columns:45px 1fr 42px; align-items:center; gap:10px; margin:14px 0; }
.color-stop input[type=color] { width:45px; height:36px; padding:2px; border:1px solid var(--ink); }
.color-stop input[type=range] { width:100%; accent-color:var(--green); }
.color-stop output { font:750 9px ui-monospace,monospace; }
.visual-preview { display:grid; grid-template-rows:1fr auto; min-height:540px; padding:25px; gap:16px; background:#d8d2c6; }
#gradient-preview { display:grid; place-items:center; min-height:390px; border:1px solid var(--ink); }
#gradient-preview span { color:#fff; mix-blend-mode:difference; font:900 clamp(28px,6vw,68px)/.9 ui-monospace,monospace; letter-spacing:-.08em; }
.visual-preview code,.shadow-stage code { padding:14px; overflow-wrap:anywhere; color:#e7eee8; background:#20352b; font-size:10px; }
.shadow-options { display:flex; justify-content:space-between; align-items:center; margin:20px 0; font-size:10px; }
.shadow-options label { display:flex; align-items:center; gap:8px; }
.shadow-options input[type=color] { width:44px; height:34px; padding:2px; }
.shadow-stage { display:grid; place-items:center; align-content:center; gap:60px; min-height:540px; padding:35px; background:repeating-linear-gradient(45deg,#ddd7ca 0 12px,#e8e2d6 12px 24px); }
#shadow-preview { display:grid; place-items:center; width:190px; aspect-ratio:1; color:#fff; background:#176b4d; border:1px solid var(--ink); font:900 64px "STKaiti","KaiTi",serif; }
.clamp-workbench { display:grid; grid-template-columns:.72fr 1.28fr; min-height:540px; }
.clamp-controls { padding:36px; border-right:1px solid var(--ink); }
.clamp-controls h2 { margin:0 0 25px; font:800 30px/1.15 "STKaiti","KaiTi",serif; }
.clamp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.clamp-grid label { display:grid; grid-template-columns:1fr auto; gap:5px; color:var(--muted); font-size:9px; font-weight:750; }
.clamp-grid input { grid-column:1/-1; min-width:0; padding:9px; background:var(--card); border:1px solid var(--line); }
.clamp-grid span { color:var(--green); font:800 8px ui-monospace,monospace; }
.clamp-preview { display:grid; place-items:center; align-content:center; gap:16px; min-width:0; padding:35px; overflow:hidden; background-color:#d9d4ca; background-image:linear-gradient(rgba(24,32,28,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(24,32,28,.07) 1px,transparent 1px); background-size:24px 24px; }
.clamp-preview>span { color:var(--muted); font:800 8px ui-monospace,monospace; letter-spacing:.12em; }
#clamp-preview-frame { width:70%; min-height:270px; display:grid; place-items:center; padding:25px; background:#20352b; border:1px solid var(--ink); box-shadow:8px 9px 0 var(--orange); transition:width .18s ease; }
#clamp-preview-frame p { margin:0; color:#f2c94c; font:900 var(--clamp-preview-size,30px)/1.08 "STKaiti","KaiTi",serif; letter-spacing:-.04em; }
.clamp-preview code { width:100%; padding:14px; color:#e7eee8; background:#20352b; font-size:10px; overflow-wrap:anywhere; }
.clamp-preview small { color:var(--muted); font:8px ui-monospace,monospace; }
.svg-output { display:grid; grid-template-rows:1fr auto auto; gap:12px; padding:20px; border-left:1px solid var(--ink); }
.svg-preview { display:grid; place-items:center; min-height:250px; overflow:hidden; background:repeating-conic-gradient(#e0dbd0 0 25%,#f0ece2 0 50%) 50%/24px 24px; border:1px solid var(--ink); }
.svg-preview img { max-width:90%; max-height:260px; }
.svg-output label { display:grid; gap:6px; font-size:9px; }
.svg-output textarea { min-height:130px; border:1px solid var(--line); }
.ratio-board { grid-template-columns:.75fr .75fr 1fr; }
.ratio-board > section,.ratio-board > aside { padding:35px; border-right:1px solid var(--ink); }
.ratio-board > aside { display:grid; align-content:center; justify-items:center; border:0; background:#e3eadf; }
.ratio-source { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:9px; margin-top:26px; }
.ratio-source label,.ratio-target label { display:grid; gap:6px; font-size:9px; font-weight:750; }
.ratio-source input,.ratio-target input { min-width:0; padding:10px; border:1px solid var(--ink); background:var(--card); }
.ratio-board section > output { display:block; margin-top:35px; color:var(--green); font:900 40px ui-monospace,monospace; }
.ratio-target h3 { margin:0 0 24px; font:800 24px "STKaiti","KaiTi",serif; }
.ratio-target label { margin-bottom:14px; }
.ratio-target p,.ratio-board aside p { color:var(--muted); font-size:9px; line-height:1.6; }
#ratio-preview { display:grid; place-items:center; max-width:100%; max-height:320px; background:#20352b; border:1px solid var(--ink); box-shadow:7px 8px 0 var(--orange); }
#ratio-preview span { color:#f2c94c; font:900 clamp(20px,3vw,40px) ui-monospace,monospace; }

@media (max-width:900px) {
  .split-lab,.visual-generator,.timer-stage,.subnet-board,.date-board,.url-workbench,.clamp-workbench { grid-template-columns:1fr; }
  .lab-controls,.timer-clock,.visual-controls,.subnet-board>section:first-child,.date-board>section:first-child,.url-workbench>section:first-child,.clamp-controls { border-right:0; border-bottom:1px solid var(--ink); }
  .percentage-grid { grid-template-columns:1fr; }
  .percentage-grid article { border-right:0; border-bottom:1px solid var(--ink); }
  .percentage-grid h2 { min-height:0; }
  .percentage-grid output { margin-top:30px; }
  .date-offset { grid-column:auto; }
  .unicode-layout { grid-template-columns:1fr; }
  .unicode-table-wrap,.svg-output { border-left:0; border-top:1px solid var(--ink); }
  .ratio-board { grid-template-columns:1fr 1fr; }
  .ratio-board>aside { grid-column:1/-1; border-top:1px solid var(--ink); }
}
@media (max-width:640px) {
  .desk-stamp { width:100%; min-width:0; }
  .expansion-intro { gap:30px; }
  .lab-controls,.password-result,.visual-controls,.converter-board,.date-board>section,.url-workbench>section,.subnet-board>section { padding:22px 16px; }
  .check-grid,.date-inputs,.metric-grid,.subnet-results,.set-inputs { grid-template-columns:1fr; }
  .converter-board>header { align-items:stretch; flex-direction:column; }
  .converter-pair { grid-template-columns:1fr; align-items:stretch; }
  .converter-pair>button { justify-self:center; transform:rotate(90deg); }
  .date-results { grid-template-columns:1fr; }
  .date-offset { grid-template-columns:1fr; padding:18px 16px; }
  .date-offset div { grid-template-columns:1fr 70px auto; }
  .date-offset div button { grid-column:1/-1; }
  .timer-clock time { font-size:65px; }
  .timer-actions { flex-wrap:wrap; justify-content:center; }
  .timer-settings-heading { flex-direction:column; }
  .timer-duration-grid,.timer-sound-grid,.stats-option-grid { grid-template-columns:1fr; }
  .url-parts { grid-template-columns:1fr; }
  .url-parts>.wide { grid-column:auto; }
  .url-param-row { grid-template-columns:1fr 1fr 34px; }
  .set-inputs section:first-child { border-right:0; border-bottom:1px solid var(--ink); }
  .ratio-board { grid-template-columns:1fr; }
  .ratio-board>section,.ratio-board>aside { border-right:0; border-bottom:1px solid var(--ink); }
  .ratio-board>aside { grid-column:auto; }
  .ip-entry { grid-template-columns:1fr auto 62px; }
  .clamp-controls { padding:22px 16px; }
  .clamp-grid { grid-template-columns:1fr; }
}