.dtl-tut *{box-sizing:border-box}.dtl-tut{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.dtl-tut .wrap{max-width:760px;margin:0 auto;padding-block:28px 64px}.dtl-tut h1,.dtl-tut h2,.dtl-tut h3{font-family:var(--font-display);line-height:1.1;text-wrap:balance;margin:0}.dtl-tut h1{font-size:clamp(2.4rem,8vw,3.6rem);font-weight:700;letter-spacing:.01em}.dtl-tut h2{font-size:clamp(1.8rem,5.5vw,2.3rem);font-weight:700}.dtl-tut h3{font-size:1.35rem;font-weight:600}.dtl-tut p{margin:0}.dtl-tut .eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.dtl-tut .lead{font-size:1.1rem;color:var(--muted);max-width:60ch}.dtl-tut code,.dtl-tut .code{font-family:var(--font-mono);font-size:.82em;background:var(--accent-soft);padding:.05em .35em;border-radius:4px;white-space:nowrap}.dtl-tut a{color:var(--accent)}.dtl-tut a:focus-visible,.dtl-tut button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dtl-tut header.top{display:grid;gap:14px;padding-block:8px 20px}.dtl-tut nav.toc{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;gap:8px;overflow-x:auto;padding-block:10px;border-bottom:1px solid var(--line);scrollbar-width:none}.dtl-tut nav.toc::-webkit-scrollbar{display:none}.dtl-tut nav.toc a{flex:none;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}.dtl-tut nav.toc a:hover{border-color:var(--accent)}.dtl-tut section{display:grid;gap:16px;padding-block:40px 8px;scroll-margin-top:64px}.dtl-tut .section-head{display:grid;gap:6px}.dtl-tut ul.clean{margin:0;padding-left:1.2em;display:grid;gap:6px}.dtl-tut ol.clean{margin:0;padding-left:1.4em;display:grid;gap:8px}.dtl-tut .box{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px;min-width:0}.dtl-tut .why{border-left:3px solid var(--accent);padding-left:12px;color:var(--muted)}.dtl-tut .why b{color:var(--ink)}.dtl-tut .tip{font-size:.95rem;background:var(--accent-soft);border-radius:8px;padding:10px 12px}.dtl-tut .seg{display:flex;flex-wrap:wrap;gap:6px}.dtl-tut .seg button{font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}.dtl-tut .seg button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.dtl-tut .ctl-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.dtl-tut .controls{display:grid;gap:10px}.dtl-tut .ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dtl-tut .ba figure{margin:0;display:grid;gap:4px;justify-items:center;background:var(--bg);border-radius:8px;padding:8px}.dtl-tut .ba figcaption{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.dtl-tut .ba svg{width:100%;max-width:220px;height:auto}.dtl-tut .stepnav{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.dtl-tut .stepnav button{font:inherit;font-weight:600;cursor:pointer;padding:8px 14px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}.dtl-tut .stepnav button:disabled{opacity:.35;cursor:default}.dtl-tut .dots{display:flex;gap:5px;flex-wrap:wrap}.dtl-tut .dots button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 .75rem var(--font-mono);cursor:pointer;padding:0}.dtl-tut .dots button.beg{border-color:var(--ok)}.dtl-tut .dots button[aria-current=true]{background:var(--accent);border-color:var(--accent);color:#fff}.dtl-tut .level{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid currentColor}.dtl-tut .level.b{color:var(--ok)}.dtl-tut .level.i{color:var(--accent)}.dtl-tut .paints{display:grid;gap:6px}.dtl-tut .paint{display:flex;gap:10px;align-items:flex-start}.dtl-tut .sw{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.25);margin-top:2px}.dtl-tut .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.95rem}.dtl-tut .kv dt{font-weight:700}.dtl-tut .kv dd{margin:0;min-width:0}.dtl-tut .mapwrap{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start}.dtl-tut .mapwrap svg{width:100%;height:auto}@media(max-width:560px){.dtl-tut .mapwrap{grid-template-columns:1fr}.dtl-tut .mapwrap svg{max-width:240px;justify-self:center}}.dtl-tut .legend{display:grid;gap:10px;font-size:.95rem}.dtl-tut .legend h4{margin:0;font-family:var(--font-display);font-size:1.1rem;display:flex;gap:8px;align-items:center}.dtl-tut .chip-s,.dtl-tut .chip-l{width:14px;height:14px;border-radius:3px;display:inline-block}.dtl-tut .chip-s{background:var(--shadow-z)}.dtl-tut .chip-l{background:var(--light-z)}.dtl-tut .legend ol{margin:0;padding-left:1.3em;display:grid;gap:2px}.dtl-tut .tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}.dtl-tut .tech .box{grid-template-rows:auto auto 1fr}.dtl-tut .pair{display:flex;align-items:center;gap:8px}.dtl-tut .pair svg{width:84px;height:84px;flex:none}.dtl-tut .pair .arrow{color:var(--muted);font-family:var(--font-mono)}.dtl-tut .consist{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}.dtl-tut .tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.dtl-tut table{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem}.dtl-tut th,.dtl-tut td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}.dtl-tut th{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}.dtl-tut tr:last-child td{border-bottom:0}.dtl-tut td .sw{display:inline-block;width:14px;height:14px;margin:0 6px -2px 0}.dtl-tut .src{font-size:.85rem;color:var(--muted)}.dtl-tut .fixes{display:grid;gap:10px}.dtl-tut .fix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.dtl-tut .fix:last-child{border-bottom:0}.dtl-tut .fix .p{font-weight:700;color:var(--bad)}.dtl-tut .fix .s{color:var(--ink)}@media(max-width:560px){.dtl-tut .fix{grid-template-columns:1fr;gap:4px}}.dtl-tut .links{display:grid;gap:10px}.dtl-tut .links a{display:grid;gap:2px;text-decoration:none;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.dtl-tut .links a span:first-child{font-weight:700;color:var(--accent)}.dtl-tut .links a span:last-child{font-size:.9rem;color:var(--muted)}.dtl-tut footer{padding-block:32px 0;color:var(--muted);font-size:.85rem}@media(prefers-reduced-motion:no-preference){.dtl-tut .ba svg{transition:opacity .2s}}.dtl-tut{--bg: rgb(11 11 16 / .86);--paper: #15151d;--ink: #e8e8ef;--muted: #a8a8bd;--line: #34344a;--accent: #c4a1ff;--accent-soft: rgb(168 85 247 / .18);--shadow-z: #8f9cff;--light-z: #ffc53d;--ok: #5cc489;--bad: #ff7a7a;--font-display: var(--font-heading--family, "Arial Narrow", Arial, sans-serif);--font-body: var(--font-body--family, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);--font-mono: ui-monospace, Menlo, Consolas, monospace;color-scheme:dark;background:var(--bg);color:var(--ink);border-radius:16px;padding-inline:16px;max-width:820px;margin:0 auto 48px;padding-left:16px!important;padding-right:16px!important}.dtl-tut nav.toc{top:var(--header-height, 0px);background:#0b0b10f2}.dtl-tut section{scroll-margin-top:calc(var(--header-height, 0px) + 64px)}.dtl-tut .seg button{background:var(--paper)}.dtl-tut .seg button[aria-pressed=true]{background:#7c3aed;color:#fff;border-color:#7c3aed}.dtl-tut nav.toc a{background:var(--paper);color:var(--ink)}.dtl-tut nav.toc a:hover{border-color:#a855f7;color:#fff}
/*# sourceMappingURL=/cdn/shop/t/10/assets/dtl-tutorial-skin.css.map */