:root{color:#1d1d1f;font-synthesis:none;text-rendering:optimizelegibility;--apple-blue:#0071e3;--apple-blue-hover:#0077ed;--text:#1d1d1f;--secondary:#6e6e73;--tertiary:#86868b;--surface:#fff;--viewer:#fff;--line:#d2d2d7;background:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%}body{background:#f5f5f7;margin:0;overflow:hidden}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{flex-direction:column;width:100%;height:100dvh;display:flex;overflow:hidden}.topbar{flex:0 0 72px;justify-content:space-between;align-items:center;width:100%;height:72px;padding:0 24px;display:flex}.brand{color:var(--text);flex-direction:column;align-items:flex-start;gap:1px;display:flex}.brand-logo{mix-blend-mode:multiply;width:118px;height:auto;display:block}.brand-tagline{color:var(--tertiary);letter-spacing:0;margin-left:2px;font-size:9px;font-weight:400;line-height:1.1}.header-actions{align-items:center;gap:10px;display:flex}.file-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.upload-button{color:#fff;background:var(--apple-blue);border:0;border-radius:19px;align-items:center;gap:7px;height:38px;padding:0 16px;font-size:12px;font-weight:500;transition:background .2s,transform .2s;display:flex}.upload-button:hover{background:var(--apple-blue-hover);transform:translateY(-1px)}.upload-button:disabled{opacity:.65;cursor:wait;transform:none}.github-link{color:#1d1d1f;background:#ffffffd1;border:1px solid #0000001a;border-radius:50%;place-items:center;width:38px;height:38px;transition:background .2s,transform .2s;display:grid;box-shadow:0 1px 2px #0000000a}.github-link:hover{background:#fff;transform:translateY(-1px)}main{flex:1;min-height:0;display:flex;overflow:hidden}.viewer-section{flex:1;width:100%;height:100%;min-height:0;padding:0 24px 24px;display:flex}.workspace-card{background:var(--viewer);border:1px solid #0000001a;border-radius:18px;width:100%;height:100%;min-height:0;margin:0;transition:border-color .2s,box-shadow .2s;display:block;overflow:hidden;box-shadow:0 20px 50px #00000014,0 2px 8px #0000000a}.workspace-card.dragging{border-color:var(--apple-blue);box-shadow:0 0 0 3px #0071e31f,0 20px 50px #00000014}.viewer-pane{background:var(--viewer);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;width:100%;min-width:0;height:100%;min-height:0;position:relative;overflow:auto}.viewer-surface{width:100%;min-width:680px;height:100%;min-height:480px;position:relative}.board-canvas{position:absolute;inset:0}.board-canvas canvas{width:100%;height:100%;display:block}.viewer-toolbar{-webkit-backdrop-filter:saturate(180%)blur(18px);backdrop-filter:saturate(180%)blur(18px);background:#ffffffdb;border:1px solid #0000001f;border-radius:10px;align-items:center;display:flex;position:absolute;top:18px;left:18px;overflow:hidden;box-shadow:0 4px 14px #00000014}.viewer-toolbar button{color:#515154;background:0 0;border:0;align-items:center;gap:7px;height:38px;padding:0 12px;font-size:11px;font-weight:500;display:flex}.viewer-toolbar button:hover,.viewer-toolbar button.active{color:var(--apple-blue);background:#0071e30f}.toolbar-divider{background:var(--line);width:1px;height:20px}.viewer-hint{white-space:nowrap;color:var(--tertiary);align-items:center;gap:8px;font-size:10px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.viewer-hint i{color:#b4b4b8;font-style:normal}.mouse-icon{border:1.2px solid var(--tertiary);border-radius:6px;width:11px;height:16px;position:relative}.mouse-icon:after{content:"";background:var(--tertiary);width:1px;height:3px;position:absolute;top:2px;left:4px}.layers-popover{-webkit-backdrop-filter:saturate(180%)blur(18px);backdrop-filter:saturate(180%)blur(18px);background:#fffffff0;border:1px solid #0000001c;border-radius:12px;width:160px;padding:13px;font-size:11px;animation:.18s ease-out rise;position:absolute;top:64px;left:110px;box-shadow:0 12px 30px #0000001f}.layers-popover p{color:var(--tertiary);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;font-size:9px}.layers-popover>span{align-items:center;gap:8px;padding:6px 0;font-weight:500;display:flex}.layers-popover>span svg{color:var(--apple-blue);margin-left:auto}.layer-dot{border-radius:50%;width:7px;height:7px}.layer-dot.copper{background:#d99a45}.layer-dot.mask{background:#2d6653}.layer-dot.board{background:#183c32}.upload-pane{background:#fff;flex-direction:column;padding:34px 30px 28px;display:flex}.upload-heading{align-items:center;gap:12px;display:flex}.upload-heading>span{width:40px;height:40px;color:var(--apple-blue);background:#f0f7ff;border-radius:11px;place-items:center;display:grid}.upload-heading h2{letter-spacing:-.2px;margin:0 0 4px;font-size:16px;font-weight:600}.upload-heading p{color:var(--secondary);margin:0;font-size:11px}.drop-zone{background:#fbfbfd;border:1.5px dashed #c7c7cc;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:220px;margin-top:28px;padding:24px;transition:border-color .2s,background .2s,transform .2s;display:flex;position:relative}.drop-zone.dragging{border-color:var(--apple-blue);background:#f2f8ff;transform:scale(1.01)}.drop-zone.invalid{border-color:#ff453a}.drop-zone input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.drop-icon{width:48px;height:48px;color:var(--apple-blue);background:#fff;border:1px solid #00000014;border-radius:50%;place-items:center;margin-bottom:13px;display:grid;box-shadow:0 3px 10px #0000000f}.drop-zone strong{color:#3a3a3c;font-size:12px;font-weight:600}.drop-zone>span{color:var(--tertiary);margin:5px 0 11px;font-size:10px}.drop-zone button{color:#fff;background:var(--apple-blue);border:0;border-radius:17px;min-width:110px;height:34px;padding:0 17px;font-size:11px;font-weight:500}.drop-zone button:hover{background:var(--apple-blue-hover)}.drop-zone button:disabled{opacity:.65;cursor:wait}.drop-zone small{color:var(--tertiary);margin-top:12px;font-size:9px}.error-message{z-index:4;color:#d70015;white-space:nowrap;text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffeb;border:1px solid #d7001529;border-radius:10px;padding:9px 13px;font-size:11px;position:absolute;top:18px;left:50%;transform:translate(-50%);box-shadow:0 5px 18px #00000014}.drop-overlay{z-index:5;color:var(--apple-blue);pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f2f8ffe0;border:2px dashed #0071e36b;border-radius:13px;place-items:center;font-size:14px;font-weight:600;display:grid;position:absolute;inset:18px}.file-summary{border-top:1px solid #e5e5ea;border-bottom:1px solid #e5e5ea;align-items:center;gap:11px;margin-top:auto;padding:15px 0 13px;display:flex}.file-icon{color:#06c;clip-path:polygon(0 0,73% 0,100% 25%,100% 100%,0 100%);background:#eaf4ff;border-radius:6px;flex:0 0 34px;place-items:center;width:34px;height:39px;display:grid}.file-icon span{font-size:7px;font-weight:700}.file-meta{flex-direction:column;gap:4px;min-width:0;display:flex}.file-meta strong{color:#3a3a3c;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:600;overflow:hidden}.file-meta span{color:var(--tertiary);font-size:9px}.ready-check{color:#fff;background:#34c759;border-radius:50%;place-items:center;width:21px;height:21px;margin-left:auto;display:grid}.stats-grid{grid-template-columns:repeat(3,1fr);padding-top:14px;display:grid}.stats-grid>div{text-align:center;border-right:1px solid #e5e5ea;flex-direction:column;gap:4px;display:flex}.stats-grid>div:last-child{border:0}.stats-grid strong{color:#3a3a3c;font-size:12px;font-weight:600}.stats-grid span{color:var(--tertiary);letter-spacing:.02em;text-transform:uppercase;font-size:8px}@keyframes rise{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media (width<=760px){.topbar{flex-basis:64px;height:64px;padding:0 14px}.viewer-section{padding:0 12px 12px}.workspace-card{border-radius:14px}.viewer-surface{min-width:0;min-height:480px}}@media (width<=480px){.brand-logo{width:108px}.brand-tagline{font-size:8px}.upload-button{justify-content:center;width:38px;padding:0}.upload-button span{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}