@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#e9eee9; --muted:#8e9992; --line:#303934; --lime:#c9f55b; --bg:#111513; --panel:#1a201d; --copper:#c97f51; }
.message-page { min-height:100vh; padding:32px; display:grid; place-items:center; }
.message-card { width:min(100%,560px); padding:48px; background:var(--panel); border:1px solid #343d38; box-shadow:0 28px 80px #0005; }
.message-card .brand-mark { margin-bottom:36px; }
.message-card h1 { margin:0 0 18px; font-size:clamp(34px,6vw,54px); line-height:1.05; letter-spacing:-.045em; }
.message-card>p:last-of-type { margin:0 0 32px; color:#a4aea8; line-height:1.7; }
.message-card .primary-button { width:auto; min-width:160px; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--bg); font-family:Manrope,Arial,sans-serif; }
button,input { font:inherit; }
.site-header { height:78px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #242b27; }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; font-size:19px; font-weight:700; letter-spacing:-.5px; }
.brand>span:last-child>span { color:var(--lime); }
.brand-mark { width:29px; height:29px; border:1px solid var(--lime); display:flex; align-items:center; justify-content:center; gap:3px; transform:rotate(-8deg); }
.brand-mark i { width:4px; height:4px; border-radius:50%; background:var(--lime); }
.status { font:11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.status i { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px #c9f55b18; }
.hero { min-height:calc(100vh - 78px); padding:clamp(50px,8vh,100px) clamp(24px,8vw,130px); display:grid; grid-template-columns:minmax(320px,1fr) minmax(400px,520px); gap:clamp(55px,9vw,150px); align-items:center; position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; width:600px; height:600px; left:-300px; bottom:-360px; background:radial-gradient(circle,#c9f55b12,transparent 68%); pointer-events:none; }
.eyebrow,.step-label { margin:0 0 18px; color:var(--lime); font:500 11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.16em; }
.hero-copy h1 { margin:0; max-width:680px; font-size:clamp(50px,6.2vw,92px); line-height:.97; letter-spacing:-.06em; font-weight:500; }
.hero-copy h1 em { color:var(--lime); font-style:normal; }
.intro { max-width:520px; margin:30px 0 52px; color:#a4aea8; font-size:16px; line-height:1.75; }
.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; border-top:1px solid var(--line); padding-top:24px; max-width:660px; }
.feature-list div { display:flex; gap:12px; }
.feature-list span { color:var(--lime); font:10px DM Mono,monospace; padding-top:3px; }
.feature-list p { margin:0; color:#758078; font-size:11px; line-height:1.5; }
.feature-list strong { display:block; color:#cdd4cf; margin-bottom:5px; font-size:12px; }
.setup-card { background:var(--panel); border:1px solid #343d38; padding:34px 36px 28px; box-shadow:0 28px 80px #0005; }
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:28px; border-bottom:1px solid var(--line); }
.card-heading .step-label { margin-bottom:7px; }
.card-heading h2 { margin:0; font-size:25px; letter-spacing:-.03em; }
.card-heading>span { color:#69736d; font:10px DM Mono,monospace; padding-top:5px; }
fieldset { border:0; margin:0; padding:28px 0 26px; border-bottom:1px solid var(--line); }
legend { width:100%; margin-bottom:17px; padding:0; font-size:12px; font-weight:600; }
legend small { float:right; color:#69736d; font:9px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.dimension-grid { display:grid; grid-template-columns:1fr 22px 1fr; align-items:end; gap:8px; }
.dimension-grid label>span:first-child { display:block; color:#8c9790; font-size:10px; margin-bottom:8px; }
.number-input { height:49px; display:flex; align-items:center; border:1px solid #3b4640; background:#141916; transition:.2s; }
.number-input:focus-within { border-color:var(--lime); }
.number-input input { width:100%; min-width:0; height:100%; padding:0 13px; border:0; outline:0; color:var(--ink); background:transparent; font:500 18px DM Mono,monospace; }
.number-input b { padding-right:12px; color:#69736d; font:9px DM Mono,monospace; text-transform:uppercase; }
.multiply { padding-bottom:15px; text-align:center; color:#667169; }
.field-help { margin:10px 0 0; color:#606a64; font-size:9px; }
.connection-options { display:grid; gap:8px; }
.connection-option { cursor:pointer; }
.connection-option input { position:absolute; opacity:0; pointer-events:none; }
.option-body { min-height:61px; padding:9px 13px; display:grid; grid-template-columns:76px 1fr 16px; gap:12px; align-items:center; border:1px solid #354039; transition:.2s; }
.connection-option:hover .option-body { border-color:#657168; }
.connection-option input:checked+.option-body { border-color:var(--lime); background:#c9f55b08; }
.option-body>span strong { display:block; font-size:11px; font-weight:600; }
.option-body>span small { color:#707a74; font-size:9px; }
.option-body u { width:13px; height:13px; border:1px solid #657068; border-radius:50%; text-decoration:none; }
.connection-option input:checked+.option-body u { border:4px solid var(--panel); background:var(--lime); box-shadow:0 0 0 1px var(--lime); }
.pad-preview { height:32px; display:flex; align-items:center; justify-content:center; gap:7px; background:#262c29; border-radius:2px; }
.pad-preview b { width:12px; height:12px; border:4px solid #b97750; background:#151916; border-radius:50%; position:relative; z-index:1; }
.pad-preview.double b:nth-child(odd):after,.pad-preview.triple b:not(:last-child):after { content:""; position:absolute; z-index:-1; top:-4px; left:5px; width:15px; height:12px; background:#b97750; }
.pad-preview.double { gap:3px; }
.pad-preview.triple { gap:3px; }
.primary-button { width:100%; height:54px; margin-top:27px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border:0; color:#161b18; background:var(--lime); cursor:pointer; font-size:12px; font-weight:700; transition:.2s; }
.primary-button:hover { background:#d8ff79; transform:translateY(-1px); }
.primary-button b { font-size:20px; font-weight:400; }
.load-project-button { width:100%; height:46px; margin-top:10px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); color:#aeb8b1; background:transparent; cursor:pointer; font-size:11px; font-weight:600; transition:.2s; }
.load-project-button:hover { color:var(--lime); border-color:var(--lime); }
.load-project-button:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.load-project-button b { font-size:18px; font-weight:400; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; }
.import-error { min-height:0; }
.form-error { min-height:14px; margin:8px 0 0; color:#f39c7c; font-size:10px; }
.workspace { min-height:calc(100vh - 78px); padding:42px clamp(24px,5vw,76px) 60px; }
.workspace-bar { display:flex; align-items:end; justify-content:space-between; margin-bottom:26px; }
.workspace-bar>div:first-child { display:flex; align-items:center; gap:20px; }
.workspace-bar .eyebrow { margin:0 0 5px; }
.workspace-bar h1 { margin:0; font-size:28px; letter-spacing:-.04em; }
.back-button { width:42px; height:42px; color:var(--ink); border:1px solid var(--line); background:transparent; cursor:pointer; }
.back-button:hover { border-color:var(--lime); color:var(--lime); }
.board-meta { display:flex; gap:8px; }
.board-meta span { padding:8px 12px; border:1px solid var(--line); color:#9ca69f; font:10px DM Mono,monospace; text-transform:uppercase; }
.canvas-shell { border:1px solid var(--line); background:#171c19; }
.canvas-tools { height:55px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:#7e8982; font:10px DM Mono,monospace; text-transform:uppercase; }
.canvas-tools>span i { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--copper); }
.canvas-tools div { display:flex; align-items:center; }
.canvas-tools button { width:32px; height:30px; color:var(--ink); border:1px solid var(--line); background:#111513; cursor:pointer; }
.canvas-tools output { width:58px; text-align:center; }
.canvas-tools .notes-control,.canvas-tools .anchor-control,.canvas-tools .rotate-control,.canvas-tools .erase-control { width:auto; min-width:76px; margin-right:10px; padding:0 9px; color:var(--lime); border-color:#526044; }
.canvas-tools .anchor-control:disabled,.canvas-tools .rotate-control:disabled,.canvas-tools .erase-control:disabled { color:#525c56; border-color:var(--line); cursor:not-allowed; }
.canvas-tools .anchor-control span,.canvas-tools .rotate-control span,.canvas-tools .erase-control span { margin-left:4px; }
.canvas-tools .anchor-control[aria-pressed="true"] { color:#171c18; border-color:var(--lime); background:var(--lime); }
.canvas-tools .erase-control { color:#f39c7c; border-color:#7a4d3d; }
.canvas-tools .erase-control:disabled { color:#5e4640; }
.canvas { height:clamp(440px,65vh,720px); overflow:auto; display:grid; place-items:center; padding:60px; background-color:#121614; background-image:linear-gradient(#2a302c55 1px,transparent 1px),linear-gradient(90deg,#2a302c55 1px,transparent 1px); background-size:24px 24px; }
#boardMount { transition:transform .18s ease; transform-origin:center; line-height:0; }
#boardMount svg { filter:drop-shadow(0 25px 28px #0008); }
.canvas-note { margin:0; padding:11px 18px; text-align:center; border-top:1px solid var(--line); color:#59635d; font:9px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.board-context-menu { display:none; position:fixed; z-index:9000; min-width:180px; padding:6px 0; border:1px solid #3a443e; border-radius:8px; background:#1a1f1c; box-shadow:0 8px 30px #000a,0 2px 8px #0006; }
.board-context-menu.visible { display:block; }
.ctx-header { padding:8px 14px 4px; }
.ctx-header strong { display:block; font-size:11px; color:var(--ink); font-weight:700; }
.ctx-divider { height:1px; margin:4px 8px; background:#2e3632; }
.board-context-menu button { width:100%; padding:7px 14px; border:0; background:transparent; color:#c2ccc6; font-size:11px; text-align:left; cursor:pointer; display:flex; align-items:center; gap:6px; }
.board-context-menu button:hover:not(:disabled) { background:#252b28; color:var(--ink); }
.board-context-menu button:disabled { color:#3f4944; cursor:default; }
.ctx-danger:hover:not(:disabled) { color:#f87171!important; }
.wire-edit-dialog { width:min(400px,calc(100vw - 40px)); max-height:calc(100vh - 40px); padding:0; overflow:hidden; border:1px solid #3a443e; color:var(--ink); background:#171c19; box-shadow:0 30px 100px #000b; }
.wire-edit-dialog::backdrop { background:#080b09c9; backdrop-filter:blur(5px); }
.wire-edit-dialog form { display:flex; flex-direction:column; }
.wire-edit-body { padding:22px; display:flex; flex-direction:column; gap:18px; }
.wire-edit-body label>span { display:block; margin-bottom:6px; color:#77817b; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.wire-edit-body input[type="text"],.wire-edit-body input:not([type]) { width:100%; height:38px; padding:0 12px; outline:0; border:1px solid #39433d; color:var(--ink); background:#111513; font-size:11px; }
.wire-edit-body input:focus { border-color:var(--lime); }
.wire-label-text { fill:#ecf0ed; font:600 7px Manrope,sans-serif; text-anchor:middle; pointer-events:none; }
.wire-label-bg { fill:#101412; stroke:#566159; stroke-width:.7; pointer-events:none; }
.notes-dialog { width:min(900px,calc(100vw - 40px)); max-height:calc(100vh - 40px); padding:0; overflow:hidden; border:1px solid #3a443e; color:var(--ink); background:#171c19; box-shadow:0 30px 100px #000b; }
.notes-dialog::backdrop { background:#080b09c9; backdrop-filter:blur(5px); }
.notes-dialog form { display:flex; max-height:calc(100vh - 40px); flex-direction:column; }
.notes-editor { min-height:0; padding:22px; display:flex; flex:1; flex-direction:column; gap:10px; }
.markdown-toolbar { display:flex; flex-wrap:wrap; gap:6px; }
.markdown-toolbar button { min-width:34px; height:32px; padding:0 10px; border:1px solid #39433d; color:#b7c0ba; background:#111513; cursor:pointer; font:10px DM Mono,monospace; }
.markdown-toolbar button:hover,.markdown-toolbar button:focus-visible { color:#171c19; border-color:var(--lime); background:var(--lime); outline:0; }
.markdown-toolbar .markdown-mode { margin-left:auto; color:var(--lime); border-color:#526044; }
.markdown-toolbar .markdown-mode[aria-pressed="true"] { color:#171c19; border-color:var(--lime); background:var(--lime); }
#projectNotes,.markdown-preview { width:100%; min-height:420px; padding:16px; border:1px solid #39433d; color:#dce4df; background:#0e1210; font:12px/1.65 DM Mono,monospace; }
#projectNotes { resize:vertical; outline:0; tab-size:4; }
#projectNotes:focus { border-color:var(--lime); }
.markdown-preview { overflow:auto; white-space:normal; }
.markdown-preview[hidden] { display:none; }
.markdown-preview h1,.markdown-preview h2,.markdown-preview h3 { margin:1.1em 0 .5em; color:var(--ink); line-height:1.25; }
.markdown-preview h1:first-child,.markdown-preview h2:first-child,.markdown-preview h3:first-child { margin-top:0; }
.markdown-preview p,.markdown-preview ul { margin:.7em 0; }
.markdown-preview ul { padding-left:24px; }
.markdown-preview code { padding:2px 5px; color:#d9f99d; background:#202720; }
.markdown-preview pre { overflow:auto; padding:14px; border:1px solid #303a34; background:#090c0a; }
.markdown-preview pre code { padding:0; color:#dce4df; background:transparent; white-space:pre; }
.notes-editor small { color:#68736c; font:9px DM Mono,monospace; text-transform:uppercase; letter-spacing:.06em; }
@media(max-width:950px) { .hero { grid-template-columns:1fr; } .hero-copy h1 { font-size:64px; } .setup-card { max-width:600px; width:100%; } .workspace-layout { grid-template-columns:1fr; } .workspace-left { position:static; order:2; } .workspace-left .setup-card { max-width:600px; } .workspace-right { order:1; } }
@media(max-width:600px) { .site-header { height:66px; } .status { display:none; } .hero { padding:48px 20px; } .hero-copy h1 { font-size:48px; } .feature-list { grid-template-columns:1fr; } .setup-card { padding:26px 20px 20px; } .workspace { padding:26px 14px; } .workspace-layout { padding:28px 16px; gap:28px; } .workspace-bar { align-items:flex-start; gap:18px; } .board-meta { flex-direction:column; } .canvas { padding:28px; place-items:start; } .footprint-tiles { grid-template-columns:1fr 1fr; gap:10px; } }

.designer-page { overflow:hidden; }
.designer-header { padding-left:28px; padding-right:28px; }
.project-title { position:absolute; left:50%; transform:translateX(-50%); text-align:center; display:flex; flex-direction:column; align-items:center; cursor:default; }
.project-title span { display:block; margin-bottom:3px; color:#657068; font:9px DM Mono,monospace; text-transform:uppercase; letter-spacing:.12em; }
.project-title input { width:clamp(120px,22vw,280px); padding:2px 8px; border:1px solid transparent; border-radius:3px; color:var(--ink); background:transparent; font-size:12px; font-weight:600; font-family:inherit; text-align:center; text-overflow:ellipsis; transition:.2s; outline:none; }
.project-title input:hover { border-color:#3a443e; }
.project-title input:focus { border-color:var(--lime); background:#1a201d; }
.project-title input:focus-visible { box-shadow:0 0 0 2px #c9f55b33; }
#titleError { display:block; min-height:12px; color:#f39c7c; font:9px DM Mono,monospace; }
.project-actions { display:flex; align-items:center; gap:10px; }
.export-project { padding:9px 13px; border:1px solid #526044; color:var(--lime); background:#c9f55b08; text-decoration:none; font:10px DM Mono,monospace; text-transform:uppercase; cursor:pointer; transition:.2s; }
.export-project:hover { background:#c9f55b14; }
.export-project:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.export-menu-wrap { position:relative; }
.export-project span { margin-left:5px; }
.export-menu { position:absolute; z-index:20; top:calc(100% + 7px); right:0; width:210px; padding:5px; border:1px solid #3a443e; background:#171c19; box-shadow:0 15px 35px #0009; }
.export-menu[hidden] { display:none; }
.export-menu button { width:100%; padding:10px 11px; border:0; color:#b7c0ba; background:transparent; cursor:pointer; font:10px DM Mono,monospace; text-align:left; }
.export-menu button:hover,.export-menu button:focus-visible { color:#171c19; background:var(--lime); outline:0; }
.new-project { padding:9px 13px; border:1px solid var(--line); color:#aeb8b1; text-decoration:none; font:10px DM Mono,monospace; text-transform:uppercase; }
.new-project:hover { color:var(--lime); border-color:var(--lime); }
.new-project:focus-visible,.back-button:focus-visible,.brand:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.designer-layout { height:calc(100vh - 78px - 38px); display:grid; grid-template-columns:250px minmax(0,1fr); }
.tool-panel { display:flex; flex-direction:column; overflow:auto; border-right:1px solid var(--line); background:#161b18; }
.tool-heading { height:70px; flex:0 0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.tool-heading p,.layer-panel>p,.board-summary>p { margin:0; color:#67726b; font:9px DM Mono,monospace; text-transform:uppercase; letter-spacing:.14em; }
.tool-heading span { color:var(--lime); font:10px DM Mono,monospace; }
.tool-list { padding:12px; display:grid; gap:4px; }
.tool-button { width:100%; min-height:58px; padding:8px 9px; display:grid; grid-template-columns:35px 1fr 18px; align-items:center; gap:9px; border:1px solid transparent; color:#98a29c; background:transparent; cursor:pointer; text-align:left; transition:.15s; }
.tool-button:hover { color:var(--ink); background:#1d2420; }
.tool-button.active { color:var(--ink); border-color:#526044; background:#c9f55b0b; }
.tool-icon { width:33px; height:33px; display:grid; place-items:center; border:1px solid #38423c; color:#a7b1ab; font:16px DM Mono,monospace; }
.tool-button.active .tool-icon { color:#171c19; border-color:var(--lime); background:var(--lime); }
.tool-button strong { display:block; font-size:11px; font-weight:600; }
.tool-button small { color:#626d66; font-size:9px; }
.tool-button kbd { color:#515b55; font:9px DM Mono,monospace; }
.tool-guide-entry { position:relative; }
.tool-guide { position:fixed; z-index:40; top:var(--tool-guide-top,180px); left:var(--tool-guide-left,262px); width:min(330px,calc(100vw - 24px)); padding:16px; visibility:hidden; opacity:0; transform:translateX(-5px); border:1px solid #526044; color:#aeb8b1; background:#171c19; box-shadow:0 18px 45px #000b; pointer-events:none; transition:opacity .15s,transform .15s,visibility .15s; }
.tool-guide-entry:hover .tool-guide,.tool-guide-entry:focus-within .tool-guide { visibility:visible; opacity:1; transform:none; }
.tool-guide:before { content:""; position:absolute; top:22px; left:-7px; width:12px; height:12px; border-left:1px solid #526044; border-bottom:1px solid #526044; background:#171c19; transform:rotate(45deg); }
.tool-guide>strong { display:block; margin-bottom:12px; color:var(--lime); font-size:11px; }
.tool-guide dl,.tool-guide dl div { margin:0; }.tool-guide dl { display:grid; gap:10px; }.tool-guide dt { margin-bottom:3px; color:var(--ink); font:9px DM Mono,monospace; text-transform:uppercase; }.tool-guide dd { margin:0; color:#78837c; font-size:9px; line-height:1.55; }
.layer-panel { margin-top:8px; padding:20px 20px 15px; border-top:1px solid var(--line); }
.layer-panel>p { margin-bottom:13px; }
.layer-panel label { padding:8px 0; display:flex; align-items:center; justify-content:space-between; color:#9ba59f; font-size:10px; cursor:pointer; }
.layer-panel label span { display:flex; align-items:center; gap:9px; }
.layer-panel i { width:7px; height:7px; border-radius:50%; }
.copper-dot { background:var(--copper); }.hole-dot { background:#090908; border:1px solid #8a5a40; }.component-dot { background:#d8e0db; }.wire-dot { background:var(--lime); }
.layer-panel input { position:absolute; opacity:0; }
.layer-panel label b { width:26px; height:14px; padding:2px; display:block; border-radius:10px; background:#3b443f; }
.layer-panel label b:after { content:""; display:block; width:10px; height:10px; border-radius:50%; background:#77817b; transition:.2s; }
.layer-panel input:checked+b { background:#5a6b31; }.layer-panel input:checked+b:after { transform:translateX(12px); background:var(--lime); }
.board-summary { margin-top:auto; padding:20px; border-top:1px solid var(--line); }
.board-summary>p { margin-bottom:12px; }
.board-summary dl { margin:0; }
.board-summary dl div { display:flex; justify-content:space-between; padding:5px 0; font-size:9px; }
.board-summary dt { color:#626c66; }.board-summary dd { margin:0; color:#a8b1ac; font-family:DM Mono,monospace; }
.designer-workspace { min-width:0; overflow:auto; padding:28px 32px 35px; }
.designer-workspace .workspace-bar { margin-bottom:20px; }
.designer-workspace .back-button { display:grid; place-items:center; text-decoration:none; }
.designer-workspace .canvas { height:calc(100vh - 259px); min-height:350px; }
.canvas-tools span b { color:#8d9891; font-weight:400; }
#boardMount.hide-copper .copper { opacity:0; }
#boardMount.hide-holes .hole { opacity:0; }
#boardMount.hide-components .placed-component:not(.wire) { opacity:0; pointer-events:none; }
#boardMount.hide-wires .placed-component.wire,#boardMount.hide-wires #wirePreviewLayer { opacity:0; pointer-events:none; }
.canvas[data-tool="wire"] { cursor:crosshair; }.canvas[data-tool="component"] { cursor:copy; }.canvas[data-tool="erase"] { cursor:not-allowed; }.canvas[data-tool="measure"] { cursor:cell; }.canvas[data-tool="label"] { cursor:text; }
@media(max-width:800px) { .designer-page { overflow:auto; } .designer-header { flex-wrap:wrap; height:112px; padding-top:10px; padding-bottom:10px; gap:6px; } .project-title { position:static; transform:none; order:3; width:100%; } .project-title input { width:100%; } .project-actions { order:2; } .designer-layout { height:auto; grid-template-columns:76px minmax(0,1fr); } .tool-panel { height:calc(100vh - 112px); position:sticky; top:0; } .tool-heading,.layer-panel,.board-summary { display:none; } .tool-list { padding:9px; } .tool-button { min-height:55px; grid-template-columns:1fr; padding:7px; } .tool-button>span:nth-child(2),.tool-button kbd { display:none; } .tool-icon { margin:auto; } .designer-workspace { padding:22px 16px; } .designer-workspace .board-meta { display:none; } .designer-workspace .canvas { height:calc(100vh - 293px); min-height:350px; } }
@media(max-width:520px) { .designer-header { padding:10px 14px; } .designer-header .brand>span:last-child { display:none; } .project-actions { gap:6px; } .export-project,.new-project { padding:7px 9px; font-size:9px; } .designer-layout { grid-template-columns:60px minmax(0,1fr); } .tool-list { padding:5px; } .designer-workspace { padding:16px 10px; } .designer-workspace .workspace-bar h1 { font-size:22px; } .designer-workspace .canvas { height:calc(100vh - 259px); } }

.component-dialog { width:min(920px,calc(100vw - 40px)); max-height:calc(100vh - 40px); padding:0; overflow:hidden; border:1px solid #3a443e; color:var(--ink); background:#171c19; box-shadow:0 30px 100px #000b; }
.component-dialog::backdrop { background:#080b09c9; backdrop-filter:blur(5px); }
.dialog-header { height:88px; padding:0 26px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.dialog-header .eyebrow { margin:0 0 5px; }.dialog-header h2 { margin:0; font-size:22px; letter-spacing:-.03em; }
.dialog-close { width:38px; height:38px; border:1px solid var(--line); color:#9da7a1; background:transparent; cursor:pointer; font-size:22px; }
.dialog-close:hover { color:var(--lime); border-color:var(--lime); }
.library-toolbar { height:78px; padding:13px 26px; display:flex; gap:14px; border-bottom:1px solid var(--line); }
.library-toolbar label { flex:1; }.library-toolbar label span,.creator-fields label>span { display:block; margin-bottom:6px; color:#77817b; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.library-toolbar input,.creator-fields input { width:100%; height:38px; padding:0 12px; outline:0; border:1px solid #39433d; color:var(--ink); background:#111513; font-size:11px; }
.library-toolbar input:focus,.creator-fields input:focus { border-color:var(--lime); }
.secondary-button,.ghost-button { padding:0 17px; border:1px solid #526044; color:var(--lime); background:#c9f55b08; cursor:pointer; font-size:10px; font-weight:600; }
.secondary-button:hover { background:#c9f55b14; }
.library-layout { height:min(510px,calc(100vh - 226px)); display:grid; grid-template-columns:200px 1fr; }
.library-sidebar { min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--line); }
.category-list { flex:1; padding:16px 12px; overflow:auto; }
.library-actions { padding:12px; display:grid; gap:8px; border-top:1px solid var(--line); }
.library-actions .secondary-button { min-height:36px; padding:8px; }
.category-list button { width:100%; padding:10px; display:flex; justify-content:space-between; border:0; color:#7e8982; background:transparent; cursor:pointer; text-align:left; font-size:10px; }
.category-list button span { color:#525c56; font:9px DM Mono,monospace; }.category-list button:hover { color:var(--ink); }.category-list button.active { color:#171c19; background:var(--lime); }
.library-layout>section { min-width:0; overflow:auto; padding:16px 20px; }.library-hint { margin:0 0 13px; color:#657069; font-size:9px; }
.component-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.component-card { min-height:82px; border:1px solid #343e38; color:var(--ink); background:#1b211e; text-align:left; }
.component-card:hover { border-color:var(--lime); }.component-card-place { width:100%; min-height:80px; padding:10px; display:grid; grid-template-columns:68px 1fr auto; gap:10px; align-items:center; border:0; color:inherit; background:transparent; cursor:pointer; text-align:left; }.component-card-actions { display:flex; border-top:1px solid #343e38; }.component-edit,.component-delete,.component-submit { flex:1; padding:8px 10px; border:0; color:var(--lime); background:#c9f55b08; cursor:pointer; font:9px DM Mono,monospace; text-transform:uppercase; }.component-card-actions button+button { border-left:1px solid #343e38; }.component-delete { color:#f39c7c; background:#f39c7c08; }.component-edit:hover,.component-submit:hover { background:#c9f55b14; }.component-delete:hover { background:#f39c7c14; }
.component-preview { width:68px; height:58px; display:grid; place-items:center; background:#111513; }
.component-preview svg { width:55px; height:44px; overflow:visible; }.component-preview rect { fill:#222a26; stroke:#9da89f; stroke-width:1; }.component-preview circle { fill:#c9f55b; stroke:#111513; stroke-width:2; }
.component-card strong { display:block; margin-bottom:5px; font-size:11px; }.component-card small { color:#69736d; font-size:9px; }.component-card-place>b { color:var(--lime); font-size:9px; font-weight:500; }
.library-empty { grid-column:1/-1; padding:40px; text-align:center; color:#707a74; font-size:10px; }
.creator-dialog { width:min(1080px,calc(100vw - 40px)); }.creator-dialog form { display:flex; flex-direction:column; max-height:calc(100vh - 42px); }
.creator-layout { min-height:0; display:grid; grid-template-columns:260px minmax(0,1fr); overflow:hidden; }.creator-fields { padding:22px; overflow:auto; border-right:1px solid var(--line); }.creator-fields>label { display:block; margin-bottom:15px; }
.creator-instructions { margin:22px 0; padding:15px; border-left:2px solid var(--lime); background:#c9f55b08; }.creator-instructions strong { font-size:10px; }.creator-instructions p { margin:7px 0 0; color:#758079; font-size:9px; line-height:1.6; }
.pin-name-field input:disabled { opacity:.45; }.contour-option { display:flex!important; align-items:center; justify-content:space-between; cursor:pointer; }.contour-option span strong { display:block; font-size:10px; }.contour-option span small { color:#67716b; font-size:8px; }
.contour-option { position:relative; }.contour-option input { position:absolute; opacity:0; pointer-events:none; }.contour-option b { width:30px; height:16px; padding:2px; display:block; border-radius:10px; background:#3b443f; }.contour-option b:after { content:""; display:block; width:12px; height:12px; border-radius:50%; background:#77817b; transition:.2s; }.contour-option input:checked+b { background:#5a6b31; }.contour-option input:checked+b:after { transform:translateX(14px); background:var(--lime); }
.contour-editor-help { margin:0 0 16px; color:#77817b; font-size:9px; line-height:1.5; }.contour-editor { position:absolute; inset:0; z-index:2; overflow:visible; touch-action:none; pointer-events:none; }.contour-editor-shape { fill:#83914a77; stroke:var(--lime); stroke-width:2; pointer-events:stroke; }.contour-vertex { fill:#151a17; stroke:var(--lime); stroke-width:2; cursor:grab; pointer-events:all; }.contour-vertex.selected { fill:var(--lime); stroke:#fff; }
.color-picker-group { margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.color-picker-row { display:flex; flex-direction:column; gap:6px; }
.color-picker-row>span { font-size:10px; font-weight:600; color:var(--ink); }
.color-swatches { display:flex; flex-wrap:wrap; gap:5px; }
.color-swatch { width:22px; height:22px; border-radius:4px; border:2px solid #3b443f; cursor:pointer; transition:border-color .15s,transform .15s; flex-shrink:0; padding:0; appearance:none; }
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.active { border-color:var(--lime); box-shadow:0 0 0 1px #000,0 0 6px #c9f55b66; }
.color-swatch-default { border:2px dashed #49544e; background:transparent!important; position:relative; }
.color-swatch-default:after { content:""; position:absolute; inset:3px; border-radius:2px; background:repeating-linear-gradient(-45deg,#49544e,#49544e 2px,transparent 2px,transparent 4px); }
.component-file-note { margin-top:24px; padding-top:15px; display:flex; gap:10px; border-top:1px solid var(--line); }.component-file-note span { height:20px; padding:4px 6px; color:#161b18; background:var(--lime); font:8px DM Mono,monospace; }.component-file-note p { margin:0; color:#657069; font-size:8px; line-height:1.5; }
.footprint-area { min-width:0; overflow:auto; padding:22px; background:#121614; }.footprint-heading { display:flex; justify-content:space-between; margin-bottom:18px; }.footprint-heading strong { display:block; font-size:11px; }.footprint-heading span { color:#69736d; font-size:9px; }.footprint-heading button { border:0; color:#87928b; background:transparent; cursor:pointer; font-size:9px; }
.footprint-grid { position:relative; width:544px; height:408px; display:grid; grid-template-columns:repeat(16,34px); grid-template-rows:repeat(12,34px); background-image:linear-gradient(#29302c 1px,transparent 1px),linear-gradient(90deg,#29302c 1px,transparent 1px); background-size:34px 34px; }
.extend-grid-dialog { width:min(460px,calc(100vw - 40px)); padding:0; color:var(--ink); border:1px solid var(--line); background:#171c19; }.extend-grid-dialog form { display:flex; flex-direction:column; }.extend-grid-fields { padding:20px 26px; display:grid; gap:18px; }.extend-grid-fields>p { margin:0; color:#87928b; font-size:9px; }.extend-grid-fields fieldset { margin:0; padding:0; display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; border:0; }.extend-grid-fields legend { padding:0; font-size:10px; }.extend-grid-options { display:flex; gap:6px; }.extend-grid-options label { position:relative; cursor:pointer; }.extend-grid-options input { position:absolute; opacity:0; pointer-events:none; }.extend-grid-options span { width:44px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid #526044; color:#aeb8b1; background:#111513; font-size:10px; font-weight:700; }.extend-grid-options input:checked+span { border-color:var(--lime); color:#161b18; background:var(--lime); }.extend-grid-options input:focus-visible+span { outline:2px solid var(--lime); outline-offset:2px; }.extend-grid-options input:disabled+span { opacity:.3; cursor:not-allowed; }.extend-grid-fields .creator-error { padding:0; }.extend-grid-dialog .dialog-actions { align-items:center; }.extend-grid-dialog .dialog-actions>button { height:48px; margin:0; }.extend-grid-dialog .dialog-actions>.primary-button { width:190px; justify-content:center; }
.grid-point { position:relative; z-index:2; width:18px; height:18px; margin:8px; padding:0; border:3px solid #49534d; border-radius:50%; background:#171c19; cursor:pointer; }.grid-point:hover { border-color:#a3b07a; }.grid-point.pinned { border-color:var(--lime); background:#283218; box-shadow:0 0 0 3px #c9f55b18; }.grid-point.selected { box-shadow:0 0 0 3px #111513,0 0 0 5px var(--lime); }.grid-point span { position:absolute; left:15px; top:-12px; padding:1px 3px; color:#c9f55b; background:#111513; font:7px DM Mono,monospace; white-space:nowrap; }
.creator-error { min-height:17px; margin:0; padding:3px 26px; color:#f39c7c; font-size:9px; }
.submission-message { margin:4px 12px; padding:6px 8px; color:#d9e4dd; background:#26302b; border-left:2px solid var(--lime); font-size:9px; white-space:normal; }
.component-attribution { display:block; margin-top:3px; color:#a3b07a !important; }
.component-cancel { padding:8px 10px; border:0; color:#f3c77c; background:#f3c77c0d; cursor:pointer; font:9px DM Mono,monospace; text-transform:uppercase; }.component-cancel:hover { background:#f3c77c1c; }.component-accept { color:#111513; border:0; background:var(--lime); cursor:pointer; }.dialog-actions { height:70px; padding:10px 22px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); }.ghost-button { color:#9da7a1; border-color:#3a443e; background:transparent; }.save-component { width:190px; height:48px; margin:0; }
.placed-component { cursor:grab; touch-action:none; }.placed-component:active { cursor:grabbing; }.placed-component.anchored,.placed-component.anchored:active { cursor:not-allowed; }.placed-component.wire { cursor:pointer; }.part-hit-area { fill:transparent; pointer-events:all; }.placed-component.wire .wire-path { fill:none; stroke:var(--wire-color,#c9f55b); stroke-linecap:round; stroke-linejoin:round; pointer-events:stroke; }.placed-component.wire .wire-node { fill:var(--wire-color,#c9f55b); stroke:#111513; stroke-width:1; pointer-events:none; }.placed-component.wire.selected .wire-path { stroke:#ffffff; stroke-dasharray:4 3; }.placed-component.wire.selected .wire-node { fill:#ffffff; }.placed-component.wire.path-editing .wire-path { cursor:copy; }.placed-component.wire.path-editing .wire-node { pointer-events:all; cursor:grab; stroke:var(--lime); stroke-width:2; }.placed-component.wire.path-editing .wire-node.selected { fill:var(--lime); stroke:#ffffff; stroke-width:3; }.placed-component.wire.drawing .wire-path,.placed-component.wire.drawing .wire-node { opacity:.6; }.part-contour { fill:var(--fp-bg,#202b27e8); stroke:var(--fp-border,#d8e0db); stroke-width:1.5; }.part-pin { fill:#c9f55b; stroke:#151a17; stroke-width:2; }.part-pin-hole { fill:#161311; pointer-events:none; }.part-name-label rect { fill:#101412; stroke:#566159; stroke-width:.7; pointer-events:none; }.part-name { fill:#ecf0ed; font:600 8px Manrope,sans-serif; text-anchor:middle; pointer-events:none; }.part-pin-label { fill:#c9f55b; font:6px DM Mono,monospace; text-anchor:middle; pointer-events:none; }.placed-component.selected .part-contour { stroke:var(--lime); stroke-width:2; stroke-dasharray:4 3; }.placed-component.selected .part-name { fill:var(--lime); }.placed-component.selected .part-name-label rect { stroke:var(--lime); }
#wirePreview { pointer-events:none; }
.export-image-dialog { width:min(680px,calc(100vw - 40px)); }
.export-image-fields { padding:8px 26px 18px; max-height:calc(100vh - 230px); overflow:auto; }
.export-image-fields fieldset { padding:20px 0; }
.export-image-fields legend { display:block; margin-bottom:10px; color:#8c9790; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.export-choice-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.image-format-options { grid-template-columns:repeat(3,1fr); }
.export-choice-row label { position:relative; cursor:pointer; }
.export-choice-row input { position:absolute; opacity:0; }
.export-choice-row label>span { min-height:64px; padding:12px 14px; display:block; border:1px solid #39433d; background:#111513; }
.export-choice-row strong { display:block; color:#dce3de; font-size:12px; }
.export-choice-row small { display:block; margin-top:4px; color:#6f7a73; font-size:9px; }
.export-choice-row input:checked+span { border-color:var(--lime); background:#c9f55b0a; }
.export-choice-row input:focus-visible+span { outline:2px solid var(--lime); outline-offset:2px; }
.jpeg-quality { padding:16px 0; display:grid; gap:10px; border-top:1px solid var(--line); }.jpeg-quality[hidden] { display:none; }.jpeg-quality>span { display:flex; justify-content:space-between; color:#dce3de; font-size:10px; }.jpeg-quality output { color:var(--lime); font:10px DM Mono,monospace; }.jpeg-quality input { width:100%; accent-color:var(--lime); }.export-image-fields .creator-error { padding:10px 0 0; }
.export-image-submit { width:180px; height:48px; margin:0; }
@media(max-width:720px) { .canvas-tools .anchor-control,.canvas-tools .rotate-control,.canvas-tools .erase-control { min-width:32px; padding:0 6px; }.canvas-tools .anchor-control span,.canvas-tools .rotate-control span,.canvas-tools .erase-control span { display:none; }.component-dialog { width:calc(100vw - 18px); }.component-list { grid-template-columns:1fr; }.library-layout { grid-template-columns:130px 1fr; }.creator-layout { grid-template-columns:1fr; overflow:auto; }.creator-fields { border-right:0; border-bottom:1px solid var(--line); }.footprint-area { min-height:470px; }.library-toolbar { padding:12px; }.secondary-button { padding:0 10px; } }

.auth-bar { display:flex; align-items:center; gap:10px; margin-left:auto; font:11px DM Mono,monospace; color:var(--muted); }
.auth-message { padding:6px 0; }
.auth-button,.auth-link { padding:7px 12px; border:1px solid var(--line); color:#aeb8b1; background:transparent; cursor:pointer; font:inherit; font-size:10px; font-weight:600; transition:.2s; }
.auth-button:hover,.auth-link:hover { color:var(--lime); border-color:var(--lime); }
.auth-button:disabled { opacity:.5; cursor:not-allowed; border-color:#3a443e; color:#5c6660; }
.auth-user { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cdd4cf; }
.designer-account { position:relative; flex:0 0 auto; padding:12px; border-top:1px solid var(--line); color:var(--muted); background:#141916; }
.designer-account-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.account-identity { min-width:0; }
.account-identity span { display:block; margin-bottom:3px; color:#59635d; font:8px DM Mono,monospace; text-transform:uppercase; letter-spacing:.12em; }
.account-identity strong { display:block; overflow:hidden; color:var(--ink); font-size:10px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.designer-account-toggle { padding:7px 9px; border:1px solid var(--line); color:#aeb8b1; background:transparent; cursor:pointer; font:9px DM Mono,monospace; text-transform:uppercase; }
.designer-account-toggle:hover,.designer-account-toggle[aria-expanded="true"] { color:var(--lime); border-color:var(--lime); }
.account-context { position:absolute; z-index:20; right:12px; bottom:calc(100% - 1px); left:12px; padding:6px; border:1px solid #3a443e; background:#1a201d; box-shadow:0 -14px 35px #0008; }
.account-context[hidden] { display:none; }
.account-context button { width:100%; padding:9px 10px; border:0; color:#aeb8b1; background:transparent; cursor:pointer; text-align:left; font:10px DM Mono,monospace; }
.account-context button:hover { color:var(--lime); background:#c9f55b0a; }
.auth-dialog { width:min(420px,calc(100vw - 28px)); padding:0; overflow:hidden; border:1px solid #3a443e; color:var(--ink); background:#171c19; box-shadow:0 30px 100px #000b; }
.auth-dialog::backdrop { background:#080b09c9; backdrop-filter:blur(5px); }
.auth-dialog form { display:none; margin:0; padding:22px 26px 26px; }
.auth-dialog form.active { display:block; }
.auth-dialog .dialog-header { height:64px; padding:0 22px; }
.auth-tabs { display:flex; border-bottom:1px solid var(--line); }
.auth-tabs[hidden] { display:none; }
.auth-tab { flex:1; height:44px; border:0; color:#87928b; background:transparent; cursor:pointer; font:10px DM Mono,monospace; text-transform:uppercase; transition:.2s; }
.auth-tab[aria-pressed="true"],.auth-tab.active { color:#171c18; background:var(--lime); }
.auth-form label { display:block; margin-bottom:14px; font-size:10px; color:#77817b; text-transform:uppercase; letter-spacing:.08em; }
.auth-form input,.auth-form select { width:100%; height:38px; margin-top:6px; padding:0 12px; outline:0; border:1px solid #39433d; color:var(--ink); background:#111513; font-size:12px; }
.auth-form input:focus,.auth-form select:focus { border-color:var(--lime); }
.auth-form .primary-button { margin-top:10px; }
.auth-error { min-height:18px; margin:4px 0 12px; color:#f39c7c; font-size:10px; }
.auth-info { margin:0 0 14px; color:#9ba59f; font-size:11px; line-height:1.5; }
.auth-hint { margin:0 0 14px; color:#77817b; font-size:10px; }
.save-project { padding:9px 13px; border:1px solid #526044; color:var(--lime); background:#c9f55b08; text-decoration:none; font:10px DM Mono,monospace; text-transform:uppercase; cursor:pointer; transition:.2s; }
.save-project:hover { background:#c9f55b14; }
.save-project:disabled { opacity:.5; cursor:not-allowed; border-color:#3a443e; color:#5c6660; background:transparent; }
.save-project:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.projects-section { padding:60px clamp(24px,8vw,130px); border-top:1px solid #242b27; }
.workspace-layout { min-height:calc(100vh - 78px); padding:clamp(40px,6vh,80px) clamp(24px,5vw,76px); display:grid; grid-template-columns:minmax(380px,480px) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:start; }
.workspace-left { position:sticky; top:clamp(40px,6vh,80px); }
.workspace-left .setup-card { width:100%; }
.workspace-right { min-width:0; display:flex; flex-direction:column; gap:40px; }
.workspace-projects { min-width:0; }
.workspace-projects .projects-header h1 { margin:0; font-size:clamp(28px,3.5vw,46px); letter-spacing:-.04em; }
.workspace-projects .project-list { max-height:calc(100vh - 260px); overflow:auto; padding-right:8px; grid-template-columns:1fr; }
.projects-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:26px; }
.projects-header h2 { margin:0; font-size:25px; letter-spacing:-.03em; }
.quota { margin:0; color:#77817b; font:11px DM Mono,monospace; }
.project-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.project-card { padding:18px; border:1px solid #343e38; background:#1b211e; }
.project-card h3 { margin:0 0 8px; font-size:15px; color:var(--ink); }
.project-meta { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; color:#77817b; font:10px DM Mono,monospace; }
.project-actions-card { display:flex; gap:10px; }
.project-actions-card button { padding:7px 12px; border:1px solid var(--line); color:#aeb8b1; background:transparent; cursor:pointer; font:10px; transition:.2s; }
.project-actions-card button:hover { color:var(--lime); border-color:var(--lime); }
.project-actions-card .delete-project { border-color:#7a4d3d; color:#f39c7c; }
.project-actions-card .delete-project:hover { background:#7a4d3d22; }
.empty-projects { color:#707a74; font-size:12px; }
.projects-hint { margin-top:14px; color:#707a74; font-size:10px; }
#componentCategory { width:100%; height:38px; margin-top:6px; padding:0 12px; outline:0; border:1px solid #39433d; color:var(--ink); background:#111513; font-size:12px; }
#componentCategory:focus { border-color:var(--lime); }
#submitComponent { height:48px; margin:0; }
.workspace-footprints { min-width:0; border-top:1px solid #242b27; padding-top:32px; }
.workspace-footprints .projects-header h1 { margin:0; font-size:clamp(24px,3vw,38px); letter-spacing:-.04em; }
.workspace-manage-btn { width:auto; height:38px; margin:0; padding:0 16px; font-size:10px; }
.footprint-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.footprint-tile { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 14px 14px; border:1px solid #343e38; background:#1b211e; cursor:pointer; transition:border-color .2s, background .2s; text-align:center; }
.footprint-tile:hover { border-color:var(--lime); background:#1f2823; }
.footprint-tile-preview { width:64px; height:52px; display:flex; align-items:center; justify-content:center; }
.footprint-tile-preview svg { width:100%; height:100%; }
.footprint-tile-preview svg rect { fill:#202b27; stroke:#566159; stroke-width:1.5; }
.footprint-tile-preview svg circle { fill:var(--lime); }
.footprint-tile-name { font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.footprint-tile-category { font:10px DM Mono,monospace; color:#77817b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.footprint-tiles-empty { grid-column:1 / -1; color:#707a74; font-size:12px; margin:0; }
.component-card-info { display:flex; align-items:center; gap:12px; padding:10px 14px; width:100%; border:1px solid #354039; background:transparent; }
.component-card-info .component-preview { flex-shrink:0; width:56px; height:40px; }
.component-card-info span:last-child { text-align:left; }
.component-card-info strong { display:block; font-size:12px; color:var(--ink); font-weight:600; }
.component-card-info small { color:#707a74; font-size:10px; }
.site-footer { border-top:1px solid #242b27; padding:18px clamp(24px,5vw,76px); }
.footer-links { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-links a { color:var(--muted); text-decoration:none; font:500 11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; transition:color .2s; }
.footer-links a:hover { color:var(--lime); }
.footer-custom { color:var(--muted); font:500 11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.footer-custom a { color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-custom a:hover { color:var(--lime); }
.designer-footer { position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--bg); border-top:1px solid #242b27; padding:10px clamp(16px,3vw,40px); }
.designer-footer .footer-links { gap:14px; }
.designer-footer .footer-links a, .designer-footer .footer-custom, .designer-footer .footer-custom a { font-size:9px; }
.info-page { min-height:calc(100vh - 78px - 58px); padding:clamp(50px,8vh,100px) clamp(24px,8vw,130px); display:flex; align-items:flex-start; }
.info-content { max-width:680px; }
.info-content h1 { margin:0 0 28px; font-size:clamp(34px,5vw,58px); line-height:1.05; letter-spacing:-.05em; font-weight:500; }
.info-content p { margin:0 0 18px; color:#a4aea8; font-size:15px; line-height:1.75; }
.info-content a { color:var(--lime); text-decoration:none; }
.info-content a:hover { text-decoration:underline; }
@media(max-width:800px) { .designer-account { margin-top:auto; padding:8px 5px; }.designer-account-row { flex-direction:column; }.account-identity span { display:none; }.account-identity strong { max-width:62px; font-size:8px; text-align:center; }.designer-account-toggle { width:100%; padding:6px 2px; font-size:7px; }.designer-account .account-context { position:fixed; right:auto; bottom:12px; left:76px; width:170px; } }
@media(max-width:600px) { .auth-bar { gap:6px; } .auth-user { max-width:100px; } .projects-header { flex-direction:column; align-items:flex-start; gap:10px; } .project-actions { flex-wrap:wrap; } .workspace-projects .project-list { max-height:none; } }
@media(max-width:520px) { .designer-account .account-context { left:60px; } }

.tutorial-page,.tutorial-reader-page { background-color:#101412; background-image:radial-gradient(#303934 1px,transparent 1px); background-size:16px 16px; }
.tutorial-library { min-height:calc(100vh - 137px); padding:clamp(58px,9vh,110px) clamp(24px,5vw,76px); }
.tutorial-hero { max-width:850px; margin-bottom:64px; }
.tutorial-hero h1 { margin:0 0 24px; font-size:clamp(52px,8vw,104px); line-height:.92; letter-spacing:-.065em; font-weight:500; }
.tutorial-hero>p:last-child { max-width:700px; margin:0; color:#aeb8b1; font-size:18px; line-height:1.75; }
.tutorial-grid { max-width:1280px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.tutorial-card { min-height:360px; padding:28px; display:flex; flex-direction:column; position:relative; border:1px solid #343e38; background:#1a201d; transition:border-color .2s,transform .2s; }
.tutorial-card:hover { border-color:var(--lime); transform:translateY(-2px); }
.tutorial-index { position:absolute; top:20px; right:20px; color:#69736d; font:9px DM Mono,monospace; letter-spacing:.14em; }
.tutorial-category { margin:0 0 28px; color:var(--lime); font:500 10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.12em; }
.tutorial-category i,.tutorial-article-header div i { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px #c9f55b80; }
.tutorial-card h2 { margin:0 0 14px; font-size:21px; line-height:1.35; letter-spacing:-.035em; }
.tutorial-card h2 a { color:var(--ink); text-decoration:none; }
.tutorial-card>p:not(.tutorial-category) { margin:0 0 22px; color:#a4aea8; font-size:14px; line-height:1.65; }
.tutorial-card-meta { margin-top:auto; margin-bottom:14px; color:#69736d; font:10px DM Mono,monospace; text-transform:uppercase; }
.tutorial-start { padding:14px 16px; display:flex; justify-content:space-between; border:1px solid var(--line); color:var(--ink); background:#272b29; text-decoration:none; font:600 11px DM Mono,monospace; text-transform:uppercase; }
.tutorial-start:hover { color:#151f00; border-color:var(--lime); background:var(--lime); }
.tutorial-empty { max-width:600px; padding:30px; border:1px solid var(--line); background:var(--panel); color:var(--muted); }
.tutorial-library-link { padding:9px 14px; border:1px solid var(--line); color:#aeb8b1; text-decoration:none; font:600 10px DM Mono,monospace; text-transform:uppercase; }
.tutorial-library-link:hover { color:var(--lime); border-color:var(--lime); }
.tutorial-reader-layout { min-height:calc(100vh - 137px); display:grid; grid-template-columns:260px minmax(0,1fr); }
.tutorial-sidebar { padding:36px 0; border-right:1px solid var(--line); background:#181c1a; }
.tutorial-sidebar>p,.tutorial-sidebar>h2 { margin-left:26px; margin-right:20px; text-transform:uppercase; }
.tutorial-sidebar>p { margin-bottom:8px; color:#8e9992; font:10px DM Mono,monospace; letter-spacing:.14em; }
.tutorial-sidebar>h2 { margin-top:0; margin-bottom:28px; font-size:18px; }
.tutorial-sidebar nav { display:grid; }
.tutorial-sidebar a { padding:14px 24px; border-left:4px solid transparent; color:#aeb8b1; text-decoration:none; font:10px/1.5 DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
.tutorial-sidebar a:hover,.tutorial-sidebar a.active { color:var(--lime); background:#c9f55b0b; }
.tutorial-sidebar a.active { border-left-color:var(--lime); }
.tutorial-reader { width:100%; max-width:980px; padding:clamp(48px,8vw,100px) clamp(24px,7vw,86px); }
.tutorial-breadcrumb { margin-bottom:50px; display:flex; gap:10px; color:#69736d; font:500 10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.12em; }
.tutorial-breadcrumb a { color:#8e9992; text-decoration:none; }.tutorial-breadcrumb b { color:var(--lime); font-weight:500; }
.tutorial-article-header { margin-bottom:70px; }
.tutorial-article-header h1 { margin:0 0 22px; font-size:clamp(48px,7vw,84px); line-height:1; letter-spacing:-.06em; font-weight:500; }
.tutorial-article-header>p { max-width:740px; margin:0 0 32px; color:#aeb8b1; font-size:18px; line-height:1.7; }
.tutorial-article-header>div { padding:15px 0; display:flex; gap:30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#8e9992; font:10px DM Mono,monospace; text-transform:uppercase; }
.tutorial-content { color:#b8c1bb; font-size:16px; line-height:1.8; }
.tutorial-content p { margin:0 0 26px; }.tutorial-content h2 { margin:52px 0 20px; padding-bottom:10px; border-bottom:1px solid var(--line); color:var(--ink); font-size:24px; letter-spacing:-.03em; }.tutorial-content h3 { margin:38px 0 15px; color:var(--ink); }.tutorial-content ol,.tutorial-content ul { margin:0 0 30px; padding-left:28px; }.tutorial-content li { margin-bottom:10px; }.tutorial-content a { color:var(--lime); }
.tutorial-chapter-nav { margin-top:70px; padding-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid var(--line); }
.tutorial-chapter-nav a { padding:17px 20px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:13px; }.tutorial-chapter-nav a:hover { border-color:var(--lime); }.tutorial-chapter-nav small { display:block; margin-bottom:6px; color:var(--lime); font:9px DM Mono,monospace; text-transform:uppercase; }.tutorial-chapter-nav .next { text-align:right; background:#c9f55b0a; }
@media(max-width:900px) { .tutorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.tutorial-reader-layout { grid-template-columns:1fr; }.tutorial-sidebar { display:none; } }
@media(max-width:600px) { .tutorial-grid { grid-template-columns:1fr; }.tutorial-card { min-height:320px; }.tutorial-article-header>div { flex-direction:column; gap:10px; }.tutorial-chapter-nav { grid-template-columns:1fr; }.tutorial-chapter-nav span { display:none; } }
.footprint-controls { display:flex; align-items:center; gap:12px; }
.editor-mode { display:flex; align-items:center; gap:2px; padding:2px; border-radius:4px; background:#171c19; border:1px solid #39433d; font-size:9px; }
.editor-mode label { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:3px; color:#87928b; cursor:pointer; }
.editor-mode input { margin:0; accent-color:var(--lime); }
.editor-mode input:checked + span { color:var(--lime); font-weight:700; }
.contour-editor.pin-mode { z-index:1; }.contour-editor.contour-mode { z-index:3; }.contour-editor.pin-mode .contour-editor-shape, .contour-editor.pin-mode .contour-vertex { pointer-events:none; }