*{box-sizing:border-box}body{margin:0;background:#f5f6f2;color:#222722;font:16px/1.5 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif}a{color:inherit}header{padding:24px 32px;background:white;border-bottom:1px solid #e1e6df;display:flex;justify-content:space-between;align-items:center}header a{font-size:14px}h1{font-size:27px;margin:8px 0 0}header p{color:#707a70;margin:2px 0;font-size:14px}#status{font-size:13px;color:#647365}main{display:grid;grid-template-columns:280px 1fr;gap:18px;max-width:1200px;margin:24px auto;padding:0 20px}section{background:white;border:1px solid #e3e8e1;border-radius:12px;padding:20px;min-width:0}h2{font-size:18px;margin:0 0 16px}#list{display:grid;gap:6px}#list button{font:inherit;text-align:left;padding:12px;border:1px solid #e1e8df;background:white;border-radius:8px;cursor:pointer}#list button[aria-current=true]{background:#e9f0e7;border-color:#7c9a7b}#list small{display:block;color:#69736b}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;padding:18px;background:#f7f8f6;border-radius:8px}textarea{width:100%;min-height:120px;padding:12px;font:inherit;border:1px solid #cdd6cc;border-radius:8px}#detail button{font:inherit;border:0;background:#263e2e;color:white;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer}label{display:block;font-weight:700;margin:20px 0 8px}.empty{color:#758075}#notice{color:#647365}@media(max-width:650px){header{padding:18px}main{grid-template-columns:1fr}#list{max-height:220px;overflow:auto}section{padding:16px}}
body{background:#fff}
[hidden]{display:none!important}#login{display:block}.login-card{max-width:420px;margin:50px auto}.login-card input{width:100%;font:inherit;padding:12px;border:1px solid #ccd5cc;border-radius:8px}.login-card button,#logout{margin-top:15px;padding:10px 18px;border:0;border-radius:8px;background:#263e2e;color:#fff;font:inherit;cursor:pointer}#login-message{color:#a62d2d}#list button:disabled{opacity:.6;cursor:not-allowed}.screen-head{display:flex;justify-content:space-between;align-items:center}.screen-head h2{margin:0}#screen-status,.screen-note{color:#68786b;font-size:13px}#mirror{display:block;width:100%;height:min(72vh,800px);margin-top:14px;border:1px solid #dfe5df;border-radius:8px;background:#fff}

@media(min-width:900px){#dashboard{max-width:1600px;grid-template-columns:minmax(360px,48%) minmax(0,1fr)}}
#list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start;max-height:75vh;overflow:auto}#list button{min-width:0;padding:8px}#list .card-preview{display:block;height:94px;overflow:hidden;position:relative;background:#f3f5f3;border-radius:5px;margin-bottom:8px}#list .card-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#829087}#list iframe{border:0;width:400%;height:400%;transform:scale(.25);transform-origin:top left;pointer-events:none;background:#fff}#list .card-title{font-weight:700}#list small{font-size:12px}#feedback-input{max-width:100%;font:inherit;padding:10px;border:1px solid #cdd6cc;border-radius:8px}

.mirror-viewport{position:relative;width:100%;margin-top:14px;overflow:hidden;border:1px solid #dfe5df;border-radius:8px;background:#fff}#mirror{position:absolute;top:0;left:0;display:block;margin:0;border:0;border-radius:0;max-width:none;transform-origin:top left}

#dashboard{display:block;max-width:1600px} #detail:not([hidden]){position:fixed;z-index:100;inset:3vh 3vw;overflow:auto;box-shadow:0 0 0 100vmax #0008,0 12px 40px #0003;padding:20px} .screen-head{gap:16px}.screen-head #screen-status{margin-left:auto} #detail #close-mirror{background:#f1f2f0;color:#222;padding:2px 12px;font-size:26px} #list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} #list button{padding:16px}

#dashboard{display:grid;grid-template-columns:minmax(0,4fr) minmax(210px,1fr);align-items:start;gap:18px;max-width:1600px}
.workshop-bookshelf{min-width:0;background:#f8f5ed;border:1px solid #e5ded0;border-radius:12px;padding:20px;max-height:75vh;display:flex;flex-direction:column}
.bookshelf-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.bookshelf-heading h2{margin:0}.bookshelf-count,.bookshelf-status{color:#718078;font-size:13px}.bookshelf-status{margin:12px 0}.bookshelf-status a{color:inherit}.bookshelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:10px;padding:8px 2px 12px;overflow:auto;min-height:0}.bookshelf-book{min-height:120px;padding:12px 9px;display:flex;flex-direction:column;justify-content:space-between;color:#172a29;text-decoration:none;background:var(--book-color);border-radius:4px 9px 9px 4px;box-shadow:inset 5px 0 #0002,2px 4px 0 #0002;transition:transform .2s}.bookshelf-book:hover,.bookshelf-book:focus-visible{transform:translateY(-4px)}.bookshelf-book strong{font-size:14px;overflow-wrap:anywhere}.bookshelf-book small{font-size:11px}
@media(max-width:700px){#dashboard{grid-template-columns:1fr}.workshop-bookshelf{max-height:45vh}.bookshelf-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr))}}