:root{--bg: #c0c0c0;--paper: #fafaf7;--paper-2: #ececea;--ink: #1a1a1a;--btn-face: #c8c8c6;--btn-light: #ffffff;--btn-dark: #4f4f4e;--btn-darker: #1f1f1e;--line: #8a8a88;--line-soft: #b8b8b6;--muted: #5a5a58;--accent: #111;--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Cochin, Georgia, serif;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;height:100vh;overflow:hidden}a{color:inherit}button{font-family:inherit;font-size:inherit;cursor:pointer}.app{height:100vh;display:flex;flex-direction:column;padding:12px 14px 14px;gap:10px;overflow:hidden}.brandbar{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:8px;flex:0 0 auto}.brandbar .brand{font-family:var(--serif);font-size:20px;letter-spacing:-.01em}.brandbar .brand a{text-decoration:none;color:var(--ink)}.brandbar .links>a{margin-left:14px;text-decoration:none;border-bottom:1px solid transparent;font-size:12px;letter-spacing:.04em}.brandbar .links>a:hover{border-bottom-color:var(--ink)}.icon-row a{text-decoration:none}.share-full{width:100vw;height:100vh;overflow:auto;background:var(--paper);padding:0 0 72px}.share-canvas{width:100%}.share-canvas canvas{display:block;width:100%;height:auto}.share-toolbar{position:fixed;bottom:12px;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:6px;z-index:10;background:var(--btn-face);padding:6px 8px;border:2px solid;border-top-color:var(--btn-light);border-left-color:var(--btn-light);border-right-color:var(--btn-darker);border-bottom-color:var(--btn-darker)}.share-error{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--bg)}.workspace{flex:1 1 auto;display:flex;gap:18px;min-height:0;min-width:0}.sidebar{flex:0 0 280px;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:6px;display:flex;flex-direction:column;gap:10px}.sidebar-group{display:flex;flex-direction:column;gap:8px}.sidebar-footer{flex:0 0 auto;padding-top:10px;margin-top:6px;border-top:1px solid var(--line);font-size:10px;line-height:1.5;color:var(--muted);display:flex;flex-direction:column;gap:2px}.sidebar-footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}.sidebar-footer a:hover{color:var(--ink);border-bottom-color:var(--ink)}.sheet-area{flex:1 1 auto;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.sheet-frame{width:100%;height:100%;background:var(--paper);border:2px solid;border-top-color:var(--btn-dark);border-left-color:var(--btn-dark);border-right-color:var(--btn-light);border-bottom-color:var(--btn-light);overflow-y:auto;overflow-x:hidden;min-width:0;min-height:0}.sheet-frame canvas{display:block;width:100%;height:100%}.h1{font-family:var(--serif);font-size:22px;letter-spacing:-.01em;font-weight:400;margin:0 0 4px}.h1.compact{font-size:18px;margin:0}.lede{color:#555;margin:0;line-height:1.5;font-size:11px}.btn{display:inline-block;padding:6px 14px;background:var(--btn-face);color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.02em;border:2px solid;border-top-color:var(--btn-light);border-left-color:var(--btn-light);border-right-color:var(--btn-darker);border-bottom-color:var(--btn-darker);border-radius:0;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.btn:before{content:"";position:absolute;inset:0;border:1px solid;border-top-color:var(--btn-face);border-left-color:var(--btn-face);border-right-color:var(--btn-dark);border-bottom-color:var(--btn-dark);pointer-events:none}.btn:active:not(:disabled){border-top-color:var(--btn-darker);border-left-color:var(--btn-darker);border-right-color:var(--btn-light);border-bottom-color:var(--btn-light)}.btn:active:not(:disabled):before{border-top-color:var(--btn-dark);border-left-color:var(--btn-dark);border-right-color:var(--btn-face);border-bottom-color:var(--btn-face)}.btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}.btn.ghost{background:var(--btn-face);color:var(--ink)}.btn.full{display:block;width:100%;text-align:center}.btn:disabled{color:var(--btn-dark);text-shadow:1px 1px 0 var(--btn-light);cursor:not-allowed}.input{display:block;width:100%;padding:5px 8px;background:#fff;color:var(--ink);font-family:var(--mono);font-size:13px;border:2px solid;border-top-color:var(--btn-darker);border-left-color:var(--btn-darker);border-right-color:var(--btn-light);border-bottom-color:var(--btn-light);border-radius:0}.input:focus{outline:1px dotted var(--ink);outline-offset:-1px}.field{display:flex;flex-direction:column;gap:3px}.label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.row{display:flex;gap:6px;align-items:center}.row.between{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:8px}.muted{color:var(--muted)}.divider{border:none;border-top:1px solid var(--line);margin:4px 0}.spacer{flex:1 1 auto}.error{color:#b00020;font-size:11px;margin:0}.frame-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.frame-cell{aspect-ratio:3 / 2;border:1px solid var(--btn-dark);background:transparent;font-size:0;border-radius:0;cursor:default;padding:0;color:transparent}.frame-cell.filled{background:var(--ink);border-color:var(--ink);cursor:pointer}.btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.btn-grid .btn{padding:7px 4px;font-size:11px;text-align:center}.btn-icon{display:inline-flex;align-items:center;gap:6px;padding:5px 10px}.btn-icon-only{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;min-width:28px}.btn-danger{color:#b91c1c}.btn-danger:hover:not(:disabled){color:#7f1010}.icon-row{display:inline-flex;gap:6px}.dashboard{height:100vh;overflow:auto}.dashboard .app{height:auto;overflow:visible}.list{list-style:none;padding:0;margin:0}.list li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}.list a{text-decoration:none;color:var(--ink);flex:1}.list .title{font-family:var(--serif);font-size:16px}.list .meta{color:var(--muted);font-size:11px}.sheet-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:4px 0 24px}.sheet-thumb-card{position:relative;display:block;background:var(--paper);border:2px solid;border-top-color:var(--btn-light);border-left-color:var(--btn-light);border-right-color:var(--btn-darker);border-bottom-color:var(--btn-darker);text-decoration:none;color:inherit;cursor:pointer;overflow:hidden}.sheet-thumb-card .sheet-thumb-inner{width:100%;display:block}.sheet-thumb-card canvas{display:block;width:100%;height:auto;pointer-events:none}.sheet-thumb-card-delete{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center}.sheets-empty{text-align:center;padding:48px 16px;border:2px solid;border-top-color:var(--btn-darker);border-left-color:var(--btn-darker);border-right-color:var(--btn-light);border-bottom-color:var(--btn-light);background:var(--btn-face);color:var(--muted);margin-top:16px}.dlg-backdrop{position:fixed;inset:0;background:#14141473;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.dlg{position:relative;background:var(--btn-face);border:2px solid;border-top-color:var(--btn-light);border-left-color:var(--btn-light);border-right-color:var(--btn-darker);border-bottom-color:var(--btn-darker);border-radius:0;padding:24px;width:380px;max-width:100%;display:flex;flex-direction:column;gap:12px}.dlg-close{position:absolute;top:8px;right:8px;width:22px;height:22px;padding:0;background:var(--btn-face);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1;cursor:pointer;border:2px solid;border-top-color:var(--btn-light);border-left-color:var(--btn-light);border-right-color:var(--btn-darker);border-bottom-color:var(--btn-darker);border-radius:0}.dlg-close:active{border-top-color:var(--btn-darker);border-left-color:var(--btn-darker);border-right-color:var(--btn-light);border-bottom-color:var(--btn-light)}