*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.55}
button,input{font:inherit}
.p-doc{max-width:1200px;margin:0 auto;padding:32px 24px 72px}
.p-pair{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;min-width:0;max-width:100%}
.p-top h1{font-size:26px;line-height:1.2;font-weight:650;letter-spacing:-.01em;margin:0 0 10px}
.p-top>p{max-width:720px;margin:0 0 8px}
.p-top>p.p-sub{color:var(--text-secondary)}
.p-doc>section{margin-top:44px;padding-top:24px;border-top:1px solid var(--border)}
.p-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.p-sec-head h2{font-size:18px;line-height:1.3;font-weight:650;margin:0}
.p-doc>section>p.p-intro{margin:6px 0 16px;color:var(--text-secondary);max-width:720px}
.p-h3{font-size:14px;font-weight:650;margin:24px 0 10px}
.p-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border-strong);border-radius:var(--radius-ctl);background:var(--bg-panel)}
.p-seg button{height:30px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:13px}
.p-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--text-primary);font-weight:600}
.p-tabs{margin-bottom:14px}
.p-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.p-stack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.p-fig{margin:0;min-width:0;max-width:100%}
.p-fig figcaption{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.p-shot{border:1px solid var(--border-strong);border-radius:var(--radius-ctl);overflow:hidden;width:fit-content;max-width:100%;background:var(--bg-panel)}
.p-shot img{display:block;max-width:100%;height:auto}
:root[data-shots="dark"] .p-shot img.t-light,:root[data-shots="light"] .p-shot img.t-dark{display:none}
.p-scaled .p-shot img{width:420px}
.p-scaled-phone .p-shot img{width:240px}
.p-crop .p-shot{width:128px;height:396px;position:relative}
.p-crop .p-shot img{position:absolute;left:0;top:0;width:264px;max-width:none;height:auto}
.p-note{margin:12px 0 4px;color:var(--text-secondary);font-size:13px;line-height:1.6}
.p-live{display:inline-flex;align-items:center;gap:5px;margin-left:6px;color:var(--text-primary);font-weight:500}
.p-live i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:p-pulse 1.8s ease-in-out infinite}
@keyframes p-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.p-e{width:16px;height:16px;vertical-align:-3px}
.p-dec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px}
.p-dec h3{font-size:14.5px;font-weight:650;margin:0 0 6px}
.p-dec>li>p{margin:0 0 12px;max-width:760px}
.p-dec .p-vars{margin:4px 0 14px}
.p-list{margin:0 0 12px;padding-left:18px;max-width:760px}
.p-list li{margin-bottom:6px}
.p-tablewrap{overflow-x:auto;margin:0 0 12px}
table{border-collapse:collapse;font-size:13px;width:100%;min-width:560px;max-width:760px}
th,td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
thead th{background:var(--bg-panel);font-weight:650}
tbody th{font-weight:600;color:var(--text-secondary);width:220px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
a{color:var(--accent)}
code{font-family:var(--font-mono);font-size:12px}
/* editor prototype */
.ed{container-type:inline-size;background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-panel);font-size:13px;line-height:1.4}
#ed-desktop .ed{width:760px;max-width:100%}
#ed-phone .ed{width:390px;max-width:100%}
.ed-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.ed-head b{font-size:14px;font-weight:650;margin-right:8px}
.ed-head span{color:var(--text-secondary)}
.ed-body{display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;padding:16px}
@container (max-width:560px){.ed-body{grid-template-columns:minmax(0,1fr)}.ed-hero{display:none}}
.ed-prev{display:flex;flex-direction:column;gap:12px;min-width:0}
.fc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--s);height:var(--s);border-radius:var(--radius-mark);color:var(--text-primary)}
.fc img{width:78%;height:78%;display:block}
.ed-strips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ed-strip{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:8px;padding:8px;min-width:0}
.ed-strip-label{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.ed-side{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.ed-row{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;font-size:13px;height:22px}
.ed-row b{font-weight:600}.ed-row>span:first-child{display:inline-flex}
.ed-line{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;margin-top:6px;font-size:13px}
.ed-glass{background:linear-gradient(135deg,#d33,#fc0 30%,#0a7 60%,#06c);border-radius:8px;padding:8px}
.ed-glass .ed-strip-label{color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .6)}
.ed-glass-bar{display:flex;align-items:center;gap:8px;background:rgb(8 8 10 / .6);color:#fff;padding:7px 8px;border-radius:6px}
.ed-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin:0 0 6px}
.ed-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--control-line);border-radius:var(--radius-ctl);margin-bottom:10px}
.ed-seg button{height:30px;padding:0 14px;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer}
.ed-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--text-primary);font-weight:600}
.ed-sws{display:grid;grid-template-columns:repeat(8,28px);gap:8px;margin-bottom:12px}
@container (max-width:400px){.ed-sws{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}}
.ed-sws button{aspect-ratio:1;width:100%;border-radius:50%;border:0;cursor:pointer;padding:0}
.ed-sws button[aria-pressed="true"]{outline:2px solid var(--text-primary);outline-offset:2px}
.ed-stop{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ed-stop input[type=color]{width:36px;height:36px;padding:2px;border:1px solid var(--control-line);border-radius:var(--radius-ctl);background:transparent;flex:none}
.ed-stop input[type=range]{flex:1;min-width:0}
.ed-stop output{width:38px;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ed-dirs{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 12px}
.ed-dirs button{width:36px;height:36px;border:1px solid var(--control-line);border-radius:var(--radius-ctl);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-primary);padding:0}
.ed-dirs button[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.ed-dirs i{display:block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid currentColor}
.ed-field{margin:4px 0 8px}
.ed-field label{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}
.ed-field output{font-weight:400;font-variant-numeric:tabular-nums}
.ed-field input{width:100%}
.ed-checks{display:flex;gap:16px;margin-bottom:14px}
.ed-checks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ed-search{width:100%;height:var(--ctl-h);padding:0 10px;border:1px solid var(--control-line);border-radius:var(--radius-ctl);background:transparent;color:var(--text-primary);margin-bottom:8px}
.ed-tones{display:flex;gap:6px;margin-bottom:8px}
.ed-tones button{width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);cursor:pointer;padding:0}
.ed-tones button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px}
.ed-cats{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.ed-cats button{flex:none;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:12px}
.ed-cats button[aria-pressed="true"]{background:var(--accent-soft);color:var(--text-primary);border-color:var(--accent)}
.ed-scroll{height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-ctl);position:relative}
.ed-inner{position:relative}
.ed-grow{position:absolute;left:0;top:0;display:flex;padding:0 4px}
.ed-gh{position:absolute;left:0;top:0;padding:7px 8px 0;font-size:11px;font-weight:600;color:var(--text-secondary)}
.ed-cell{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;cursor:pointer;padding:0}
#ed-phone .ed-cell{width:44px;height:44px}
.ed-cell:hover{background:var(--bg-hover)}
.ed-cell[aria-pressed="true"]{background:var(--accent-soft);outline:2px solid var(--accent);outline-offset:-2px}
.ed-cell img{width:26px;height:26px;display:block}
.ed-none{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px}
.ed-none span{color:var(--text-secondary)}
.ed-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.ed-btn{height:var(--ctl-h);padding:0 14px;border-radius:var(--radius-ctl);border:1px solid var(--control-line);background:transparent;color:var(--text-primary);cursor:pointer;white-space:nowrap}
.ed-btn.pri{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.ed-btn:disabled{opacity:.55;cursor:default}
.ed-msg{color:var(--text-secondary);font-size:12px}
@media (max-width:640px){
 .p-doc{padding:20px 16px 56px}
 .p-top h1{font-size:22px}
 .p-row{gap:14px}
 .p-row>.p-fig:not(.p-crop),.p-pair>.p-fig{flex:1 1 100%}
 .p-scaled .p-shot img{width:100%}
 table{min-width:0;font-size:12px}
 th,td{padding:6px}
 tbody th{width:auto}
}