.mock{--m-bg:var(--panel);--m-panel:var(--bg-soft);--m-fg:var(--text);--m-muted:var(--dim);--m-border:var(--line);--m-red:var(--red);--m-amber:var(--amber);--m-purple:var(--purple);--m-green:var(--teal);--mei:var(--coral-text);--kai:var(--blue);background:var(--m-bg);color:var(--m-fg);box-shadow:0 0 0 1px var(--line), var(--shadow-lift);border-radius:var(--radius);font:14px/1.55 var(--sans);overflow:hidden;container-type:inline-size}.mock-bar{background:var(--bg-soft);border-bottom:2px solid var(--m-border);color:var(--m-muted);align-items:center;gap:12px;padding:9px 14px;font-size:12px;display:flex}.mock-dots{gap:6px;display:flex}.mock-dots i{background:var(--m-border);border-radius:50%;width:10px;height:10px}.mock-dots i:first-child{background:var(--coral)}.mock-body{padding:16px}.w-node{font:760 16px/1.2 var(--sans);color:var(--m-fg);margin-bottom:10px}.w-line{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:3px 8px;display:grid}.w-line[data-who]{background:color-mix(in srgb, var(--who) 10%, transparent);box-shadow:inset 3px 0 0 var(--who);border-radius:6px}.w-line+.w-line[data-who]{margin-top:2px}.w-who{color:var(--who,var(--m-muted));text-align:right;white-space:nowrap;font-weight:650}.w-narr .w-say{color:var(--m-muted);font-style:italic}.tag{background:var(--blue-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent);color:var(--blue-strong);white-space:nowrap;border-radius:6px;align-items:center;gap:5px;padding:1px 8px;font-size:12px;font-weight:700;display:inline-flex}.tag-set{background:var(--green-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent);color:var(--green-text)}@container (width<=420px){.w-line{grid-template-columns:44px minmax(0,1fr);gap:8px}}.p-screen{aspect-ratio:16/9;background:var(--art-bg);box-shadow:0 0 0 1px var(--m-border);border-radius:9px;position:relative;overflow:hidden;container-type:inline-size}.p-screen .art{position:absolute;inset:0}.p-portrait{aspect-ratio:1;width:17%;font:800 9cqw/1 var(--sans);color:#1d2638;background:repeating-linear-gradient(45deg, var(--sun) 0 6px, #e09a24 6px 12px);border-radius:8px;place-items:center;display:grid;position:absolute;bottom:7%;left:4%;box-shadow:0 0 0 2px #1d2638}.p-text{color:#fff;font:650 max(11px, 3.6cqw) / 1.3 var(--sans);text-shadow:1px 1px #1d2638;position:absolute;bottom:7%;left:25%;right:4%}.p-text b{color:var(--mei)}.p-options{gap:.25em;margin:.4em 0 0;padding:0;list-style:none;display:grid}.p-options li{background:#1d2638d1;border-radius:5px;padding:.1em .5em;box-shadow:inset 0 0 0 1px #ffffff40}.p-hint{color:var(--m-muted);margin-top:10px;font-size:12.5px}.cols{grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;display:grid}.col{box-shadow:inset 0 0 0 1px var(--m-border);border-radius:9px;overflow:hidden}.col-head{background:var(--bg-soft);color:var(--m-fg);border-bottom:2px solid var(--m-border);padding:5px 10px;font-size:12px;font-weight:700}.col .w-line{grid-template-columns:34px minmax(0,1fr);margin:6px}@container (width<=420px){.cols{grid-template-columns:1fr}}.events{gap:10px;display:grid}.event-row{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px;display:grid}.event-row>*{min-width:0}.event-head{letter-spacing:.06em;text-transform:uppercase;color:var(--m-muted);font-size:11.5px;font-weight:700}.typed,.yarn{font-family:var(--mono);background:var(--m-panel);box-shadow:inset 0 0 0 1px var(--m-border);overflow-wrap:anywhere;border-radius:6px;padding:6px 8px;font-size:12px}.typed{color:var(--m-fg)}.yarn{color:var(--green-text)}@container (width<=520px){.event-row{grid-template-columns:1fr}.event-row-head{display:none}}.map svg{width:100%;height:auto}.map text{font-family:var(--sans)}.legend{color:var(--m-muted);flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12.5px;display:flex}.legend span:before{content:"";background:var(--c);width:10px;height:10px;margin-right:6px;display:inline-block}.problems{gap:8px;margin:0;padding:0;list-style:none;display:grid}.problems li{background:var(--bg-soft);border-radius:8px;grid-template-columns:12px minmax(0,1fr);align-items:start;gap:10px;padding:8px 10px;display:grid}.problems li:before{content:"";background:var(--c);width:10px;height:10px;margin-top:6px}.problems li>span{color:var(--m-fg)}.problems small{color:var(--m-muted);display:block}.fix{color:#fff;background:var(--m-amber);border-radius:6px;margin-top:6px;padding:2px 10px;font-size:12.5px;font-weight:700;display:inline-block}.placeholder-row{color:var(--m-muted);align-items:center;gap:12px;margin-top:12px;font-size:13px;display:flex}.placeholder{width:56px;height:56px;font:800 26px/1 var(--sans);color:#1d2638;background:repeating-linear-gradient(45deg, var(--sun) 0 6px, #e09a24 6px 12px);box-shadow:0 0 0 1px var(--m-border);border-radius:8px;flex:none;place-items:center;display:grid}.misspelt{text-decoration:underline wavy var(--m-red);text-underline-offset:3px}.suggest{background:var(--panel);box-shadow:inset 0 0 0 1px var(--m-border);border-radius:6px;gap:8px;margin-top:6px;padding:3px 8px;font-size:12px;display:inline-flex}.code{font-family:var(--mono);white-space:pre;color:var(--m-fg);margin:0;font-size:12.5px;line-height:1.6;overflow-x:auto}.code .k{color:var(--blue)}.code .c{color:var(--green-text)}.code .n{color:var(--mei)}.code .o{color:var(--blue)}.map .m-box{fill:var(--m-panel);stroke:var(--m-border);stroke-width:2px}.map .m-done{stroke:var(--teal)}.map .m-art{stroke:var(--amber)}.map .m-code{fill:url(#stripes);stroke:var(--purple)}.map .m-stripe-a{fill:var(--m-panel)}.map .m-stripe-b{fill:color-mix(in srgb, var(--purple) 14%, var(--m-panel))}.map .m-text,.map .m-title{fill:var(--m-fg)}.map .m-title{font-size:14px;font-weight:700}.map .m-note{fill:var(--m-muted)}.map .m-art-text{fill:var(--amber)}.map .m-code-text{fill:var(--purple)}.map .m-arrow{fill:none;stroke:var(--m-muted);stroke-width:2px}.map .m-arrow-head{fill:var(--m-muted)}.map .m-label{fill:var(--m-muted);stroke:var(--m-bg);stroke-width:4px;paint-order:stroke;font-size:11px}