:root{
    --bg: #eee9df;
    --panel: #f8f5ee;
    --panel-2: #e3ddd1;
    --border: #252525;
    --text: #171717;
    --muted: #68645d;
    --purple: #2447d8;
    --green: #d9f04a;
    --red: #e7472e;
    --blue: #2447d8;
    --shadow: 5px 5px 0 #252525;
    --mono: "SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{ box-sizing: border-box;}
html{background: var(--bg);}
body{margin: 0;background: var(--bg);color: var(--text);font-family:Arial,Helvetica,sans-serif;min-height:100vh;background-color:linear-gradient(#25252512 1px,transparent 1px),linear-gradient(90deg,#25252512 1px,transparent 1px);background-size:24px 24px}
button, input{font: inherit;}
button{border-radius: 0;}
.app-shell{width: min(1240px, calc(100% - 36px));margin: 0 auto;padding: 30px 0 56px;}
.app-header{display: flex;justify-content: space-between;align-items: flex-end;gap: 24px;margin-bottom: 28px;border-bottom: 3px solid var(--border);padding-bottom: 18px;}
.eyebrow{font-family: var(--mono);font-size: 10px;letter-spacing: .12em;font-weight: 800;color: var(--red);margin: 0 0 9px;}
.app-header h1{font-size: clamp(34px,5.2vw,72px);line-height: .94;margin: 0;font-weight: 900;letter-spacing: -.075em;max-width: 780px;}
.subtitle{font-family: var(--mono);font-size: 13px;margin: 14px 0 0;color: var(--muted);}
.live-badge{border: 2px solid var(--border); background: var(--green);color: var(--text);padding: 10px 12px;font-family: var(--mono);font-size: 11px;font-weight: 900;white-space: nowrap;box-shadow: 3px 3px 0 var(--border);}
.live-badge span{display: inline-block;width: 8px; height: 8px; background: var(--red); border: 1px solid var(--border);margin-right: 7px;}
.stats-grid{display: grid;grid-template-columns: repeat(4, 1fr);gap: 12px;margin-bottom: 16px;}
.stat-card, .panel{background: var(--panel);border:2px solid var(--border);border-radius:0;box-shadow:var(--shadow)}
.stat-card{padding: 16px;position: relative;overflow: hidden;}
.stat-card:before{content: "";position: absolute;right: -22px;top: -22px;width: 60px;height: 60px;border: 2px solid var(--border);border-radius: 50%;}
.stat-card span, .stat-card small{display: block;color: var(--muted);font-family: var(--mono);font-size: 11px;}
.stat-card strong{display: block;font-family: var(--mono);font-size: 34px;margin: 13px 0 5px;letter-spacing: -.08em;}
.panel{padding: 20px;margin-bottom: 16px;}
.panel-heading{display: flex;justify-content: space-between;align-items: flex-start;gap: 15px;margin-bottom: 18px;}
.panel h2{font-size: 19px;margin: 0;font-weight: 900;letter-spacing: -.04em;}
.muted{color: var(--muted); font-family: var(--mono);font-size: 11px;line-height: 1.6;}
.button{border: 2px solid var(--border);padding: 11px 15px;font-family: var(--mono); font-size: 11px;font-weight: 900;cursor: pointer;transition: transform .15s, box-shadow .15s;background: var(--panel-2);color: var(--text);box-shadow: 3px 3px 0 var(--border);}
.button:hover{transform: translate(2px, 2px);box-shadow: 1px 1px 0 var(--border);}
.button:active{transform: translate(3px, 3px);box-shadow: none;}
.button:focus-visible, input:focus-visible{outline: 3px solid var(--red);outline-offset: 3px;}
.button.primary{background: var(--blue);color: #fff;}
.button.success{background: var(--green);color: var(--text);}
.button.compact{padding: 7px 12px;}
.controls-panel{padding-bottom: 18px;}
.control-row{display: flex;align-items: center;justify-content: space-between;padding: 12px;}
.control-row label{font-family: var(--mono);font-size: 12px;font-weight: 800;}
.capacity-control{display: flex;align-items: center;gap: 8px;}
.capacity-control input{width: 64px;text-align: center;}
.progress-track{background: var(--panel-2);border: 2px solid var(--border);height: 13px;overflow: hidden; margin-top: 18px;}
.progress-track div{height: 100%;background: var(--red);width: 0;transition: width .3s;}
.operations-grid{display: grid;grid-template-columns: 1.3fr 1fr;gap: 16px;}
.operation-card{margin-bottom: 0;}
.operation-title{display: flex;align-items: center;gap: 10px;margin-bottom: 17px;}
.operation-title h2{font-family: var(--mono); font-size: 14px;}
.operation-icon{display: grid; place-items: center;width: 34px;height: 34px;border: 2px solid var(--border);background: var(--green); font-size: 22px;font-weight: 900;}
.get-card .operation-icon{background: var(--blue); color: white;}
.form-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 12px;}
.operation-card label{display:grid;gap:7px;color:var(--muted);font-family:var(--mono);font-size:11px;margin-bottom:14px}
.field, .capacity-control input, input{border: 2px solid var(--border);background: #fffdf8;padding: 12px;font-family: var(--mono);font-size: 12px;color: var(--text); border-radius: 0; min-width: 0;width: 100%;}
.status-message{border:2px solid var(--border);border-left:9px solid var(--blue);background:var(--panel);padding:13px 15px;color:var(--text);font-family:var(--mono);font-size:12px;margin:16px 0;box-shadow:3px 3px 0 var(--border)}
.status-message.good{border-left-color: var(--green);}
.status-message.bad{border-left-color: var(--red);}
.legend{display: flex;gap: 7px;flex-wrap: wrap;}
.legend span,.count-badge{font-family:var(--mono);font-size:10px;font-weight:900;border:2px solid var(--border);padding:5px 8px;border-radius:0}
.legend-mru{background:var(--green)}
.legend-node{background:var(--panel-2)}
.legend-lru{background:var(--red);color:white}
.count-badge{background:var(--blue);color:white}
.list-frame{border:2px solid var(--border);background:#fffdf8;padding:13px;position:relative}
.list-labels,.list-foot{display: flex;justify-content: space-between;font-family: var(--mono);font-size: 10px;font-weight: 900;}
.list-labels{color: var(--blue);}
.list-labels span:last-child{color: var(--red);}
.list-foot{color: var(--muted);margin-top: 3px;}
.cache-chain{display:flex;align-items:center;overflow-x:auto;min-height:150px;padding:27px 8px;gap:0}
.cache-node{flex:0 0 132px;min-height:120px;position:relative;padding:12px;border:2px solid var(--border);border-radius:0;background:var(--panel);box-shadow:4px 4px 0 var(--border);transition:transform .35s,border-color .2s,box-shadow .2s}
.cache-node.selected{border-color:var(--blue);box-shadow:4px 4px 0 var(--blue)}
.cache-node .node-badge{position:absolute;top:-13px;left:9px;padding:4px 8px;border:2px solid var(--border);background:var(--green);font-family:var(--mono);font-size:9px;font-weight:900;color:var(--text)}
.cache-node .node-key{font-family:var(--mono);font-size:26px;font-weight:900;letter-spacing:-.08em}
.cache-node .node-value{font-family:var(--mono);font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin-top:5px}
.cache-node .pointer{font:10px var(--mono);color:var(--muted);margin-top:9px;overflow-wrap:anywhere}
.chain-arrow{flex:0 0 42px;text-align:center;color:var(--border);font-size:22px;font-weight:900}
.empty-state{width:100%;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px;padding:32px}
.helper-text{margin:12px 0 0}
.two-column-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-column-grid .panel{margin-bottom:0}
.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{color:var(--muted);font:10px var(--mono);text-transform:uppercase;letter-spacing:.07em;padding:11px;border-bottom:2px solid var(--border)}td{padding:11px;border-bottom:1px solid #25252555;font-family:var(--mono)}tr:last-child td{border-bottom:0}
.operation-log{min-height:90px}
.log-row{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid #25252555;font-family:var(--mono);font-size:11px}
.log-row:last-child{border-bottom:0}.log-op{font-weight:900;color:var(--blue)}
.log-time{margin-left:auto;color:var(--muted);white-space:nowrap}
.pointer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:15px}
.pointer-grid>div{background:#fffdf8;border:2px solid var(--border);padding:13px}
.pointer-grid span{display:block;color:var(--muted);font:10px var(--mono)}
.pointer-grid strong{display:block;font:900 20px var(--mono);margin-top:7px;overflow-wrap:anywhere}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.step-button{display:flex;align-items:center;gap:10px;text-align:left}
.step-number{display:grid;place-items:center;flex:0 0 28px;height:28px;border:2px solid var(--border);background:var(--green);color:var(--text);font:900 11px var(--mono)}
.step-button small{display:block;color:var(--muted);margin-top:4px;font:10px var(--mono)}
code{font-family:var(--mono);color:var(--blue);font-weight:900}

@keyframes promote{0%{transform: translateY(0)}45%{transform: translateY(-14px)}100%{transform: translateY(0)}}
@keyframes evict{0%{opacity: 1;transform: scale(1)}40%{background:#ffd7d0;border-color:var(--red);transform:scale(1.04)}100%{opacity:0;transform:translateX(25px) scale(.8)}};
.promote{animation: promote .5s ease}.evict{animation: evict .6s ease forwards}

@media(max-width: 850px){.stats-grid{grid-template-columns:repeat(2,1fr)}.operations-grid, .two-column-grid{grid-template-columns:1fr}.steps-grid{grid-template-columns:repeat(2fr 1fr)}}
@media(max-width: 560px){.app-shell{width:min(100% - 20px,1240px);padding-top:22px}.app-header{display:block}.live-badge{display:inline-block;margin-top:17px}.stats-grid{gap:9px}.stat-card{padding:12px}.stat-card strong{font-size:27px}.panel{padding:13px}.form-grid,.pointer-grid{grid-template-columns:1fr 1fr}.steps-grid{grid-template-columns:1fr}.panel-heading{gap:9px}.cache-node{flex-basis:116px}.chain-arrow{flex-basis:28px}}
@media(prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}

.intro-strip{display: grid; grid-template-columns: auto 1fr auto;gap: 22px;align-items: center;border-top: 2px solid var(--border); border-bottom: 2px solid var(--border);padding: 18px 0;margin-bottom: 18px;}
.intro-mark{font: 900 42px/1 var(--mono); letter-spacing: -0.08em;color: var(--blue);}
.intro-mark span{display:block;font-size: 10px; letter-spacing: -.08em; color: var(--muted); margin-top: 7px;}
.intro-copy{font-size: clamp(16px, 2vw, 23px); line-height: 1.15;letter-spacing: -.04em;max-width: 650px;margin: 0;}
.intro-note{border-left:2px solid var(--border);padding-left:18px;font-family:var(--mono);font-size:11px}
.intro-note span{display:block;color:var(--muted);margin-bottom:5px}
.intro-note strong{font-size:13px}
.list-panel{position: relative;}
.execution-bar{display: flex;justify-content: space-between;align-items: center;gap: 20px;border-top: 2px solid var(--border);margin-top: 20px;padding-top: 16px;}
.execution-bar strong{display:block;font:900 15px var(--mono);margin:3px 0}
.execution-bar .eyebrow{margin-bottom:4px}
.trace-actions{display:flex;gap:8px;flex-shrink:0}

@media(max-width: 650px){.intro-strip{grid-template-columns:auto 1fr;gap:13px}.intro-note{grid-column: 2;border-left: 0;border-top: 1px solid var(--border);padding: 9px 0 0;}.execution-bar{flex-direction:column;align-items:flex-start;}.trace-actions{width: 100%;} .trace-actions .button{flex:1;}}