:root{--soil:#342b22;--paper:#f4ecd9;--leaf:#426b3a;--lime:#b8d85b;--clay:#c76c45;--line:#b8aa91}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--soil);font-family:Georgia,"Songti SC",serif;background-image:radial-gradient(#d7cbb5 1px,transparent 1px);background-size:18px 18px}.shell{width:min(1180px,calc(100% - 32px));margin:auto}header{padding:48px 0 28px;display:grid;grid-template-columns:1fr 420px;align-items:end;border-bottom:3px double var(--line)}.sprout{font:700 11px/1 system-ui;letter-spacing:.2em;color:var(--leaf)}h1{margin:12px 0 0;font-size:clamp(52px,8vw,100px);line-height:.75;letter-spacing:-.06em;font-weight:400}h1 i{color:var(--leaf)}header p{font-size:17px;line-height:1.8;margin:0;border-left:1px solid var(--line);padding-left:30px}nav{display:flex;gap:12px;align-items:center;padding:18px 0}.seg{display:flex;border:1px solid var(--soil);padding:3px;background:#e4dac5}.seg button,.ghost,.operation button{border:0;background:transparent;color:var(--soil);padding:9px 14px;cursor:pointer;font-weight:700}.seg button.active{background:var(--soil);color:var(--paper)}.ghost{margin-left:auto;border-bottom:1px solid var(--soil)}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;border:1px solid var(--soil);background:rgba(244,236,217,.88);box-shadow:8px 8px 0 #b7aa91}.plot{padding:28px;border-right:1px solid var(--soil)}.plot-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.plot-head span{display:block;font:11px system-ui;color:#756957;text-transform:uppercase;letter-spacing:.15em}.plot-head strong{font-size:28px;color:var(--leaf)}.plot-head p{font:12px system-ui;color:#756957}.grid{display:grid;gap:9px}.bits-8{grid-template-columns:repeat(4,1fr)}.bits-16{grid-template-columns:repeat(8,1fr)}.bit{min-width:0;aspect-ratio:1/1.08;border:1px solid #796e5d;background:#e9dfca;position:relative;cursor:pointer;padding:8px;display:flex;flex-direction:column;justify-content:space-between;transition:.15s}.bit:before{content:"";width:8px;height:8px;border:1px solid #796e5d;border-radius:50%}.bit.on{background:var(--lime);border-color:var(--leaf);box-shadow:inset 0 0 0 3px rgba(66,107,58,.15)}.bit.on:before{background:var(--leaf);border-color:var(--leaf)}.bit .n{font:700 16px ui-monospace,monospace}.bit .label{font:10px system-ui;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#665b4d}.edit-label{position:absolute;right:5px;top:5px;border:0;background:none;cursor:pointer;font-size:12px;color:#6f624f}.readout{display:grid;grid-template-columns:2fr 1fr 1fr;border-top:1px solid var(--line);margin-top:24px;padding-top:20px;gap:12px}.readout span{display:block;font:10px system-ui;color:#7c6e5c}.readout code{font-size:clamp(13px,2vw,20px);word-break:break-all}aside{padding:26px;background:#e9dfca}aside h2{font-size:25px;margin:0 0 18px}.operation{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.operation button+button{border-left:1px solid var(--line)}.operation button.active{background:var(--leaf);color:white}.operation small{font-size:9px;font-weight:400}.equation{display:grid;grid-template-columns:1fr auto 1fr auto;gap:7px;align-items:center;margin:28px 0 12px;font:14px ui-monospace,monospace}.equation strong{grid-column:1/-1;font-size:37px;color:var(--clay)}.mini-grid{display:grid;gap:4px}.mini-grid.bits-16{grid-template-columns:repeat(8,1fr)}.mini{aspect-ratio:1;background:#cec3ae;border:1px solid #ad9f88}.mini.on{background:var(--clay);border-color:#8b4329}.result-meta{font:11px ui-monospace,monospace;display:flex;justify-content:space-between;margin-top:8px;color:#766957;gap:8px}.result-meta span{overflow-wrap:anywhere}aside h3{font:13px system-ui;margin-top:28px;border-bottom:1px solid var(--line);padding-bottom:8px}.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{font:11px system-ui;border:1px solid var(--leaf);color:var(--leaf);padding:5px 8px;border-radius:50%}.tags .empty{border:0;color:#8d816e}dialog{border:1px solid var(--soil);background:var(--paper);color:var(--soil);box-shadow:8px 8px 0 var(--soil);padding:0}dialog::backdrop{background:rgba(52,43,34,.55)}dialog form{padding:28px;width:min(360px,80vw)}dialog span{font:11px system-ui;color:var(--leaf)}dialog h2{font-size:24px}dialog input{width:100%;border:0;border-bottom:2px solid var(--leaf);background:#e7dcc5;padding:12px;font:16px system-ui;outline:0}dialog form div{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}dialog button{padding:9px 15px;border:1px solid var(--soil);background:none;cursor:pointer}dialog #saveLabel{background:var(--soil);color:var(--paper)}footer{width:min(1180px,calc(100% - 32px));margin:28px auto;padding:18px 0 35px;font:11px system-ui;color:#7f725e}@media(max-width:800px){header{display:block}header p{margin-top:30px;padding-left:18px}main{grid-template-columns:1fr}.plot{border-right:0;border-bottom:1px solid var(--soil)}.bits-16{grid-template-columns:repeat(4,1fr)}.mini-grid.bits-16{grid-template-columns:repeat(8,1fr)}}@media(max-width:500px){nav{flex-wrap:wrap}.ghost{margin-left:0}.plot{padding:16px}.bits-8{grid-template-columns:repeat(2,1fr)}.bits-16{grid-template-columns:repeat(4,1fr)}.plot-head{display:block}.plot-head p{margin-bottom:0}.readout{grid-template-columns:1fr}.bit{aspect-ratio:1.25/1}aside{padding:18px}}