:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#151513;color:#f8f5ec;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;touch-action:pan-x pan-y}
button,input{font:inherit}
button{cursor:pointer}
.lab{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;max-width:900px;margin:auto;background:#151513;overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.masthead{display:flex;justify-content:space-between;align-items:center;padding:13px 16px 9px;gap:12px;flex:none}
.eyebrow{font-size:9px;letter-spacing:.18em;font-weight:900;color:#f0c348}.dot{color:#d8d3c8;margin:0 4px;font-size:6px;vertical-align:middle}
.headline{font-size:27px;line-height:1.05;letter-spacing:-1.3px;font-weight:1000;font-style:italic;margin-top:4px}.gold{color:#f4c641}
.version{font-style:normal;font-weight:800;font-size:9px;letter-spacing:.12em;vertical-align:middle;color:#8f8e87;padding-left:8px}
.icon-button{background:#292926;border:1px solid #44443f;border-radius:9px;color:#f3cb4e;font-size:22px;width:42px;height:42px;flex:none}
.tool-picker{display:flex;gap:7px;padding:0 16px 8px;flex:none}
.tool-choice{flex:1;min-width:0;background:#272722;color:#bdb9ae;border:1px solid #4a4942;border-radius:8px;padding:7px 10px;text-align:left;touch-action:manipulation}
.tool-choice span{display:block;font-size:12px;font-weight:950;font-style:italic;letter-spacing:.02em}.tool-choice small{display:block;font-size:9px;color:#959185;margin-top:2px}
.tool-choice.selected{border-color:#edc443;background:#3a331e;color:#f6d36a}.tool-choice.selected small{color:#d9c484}
.palette{display:flex;gap:8px;padding:7px 16px 13px;flex:none;justify-content:space-between}
.swatch{border:2px solid #555;background:var(--sw);height:31px;max-width:80px;flex:1;border-radius:8px;min-width:0;position:relative}
.swatch.selected:after{content:"";position:absolute;inset:-5px;border:2px solid #f2c648;border-radius:11px;pointer-events:none}
.swatch.light{border-color:#aaa}
.canvas-wrap{background:#e9dfc8;position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none!important;overscroll-behavior:none!important;user-select:none;-webkit-user-select:none}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#ink{cursor:crosshair}
.paper-label{position:absolute;top:14px;left:15px;pointer-events:none;color:#7c7059;font-size:9px;font-weight:900;letter-spacing:.19em;opacity:.45}
.drawing-hint{position:absolute;bottom:16px;left:5px;right:5px;text-align:center;color:#847860;opacity:.6;font-size:10px;font-weight:900;letter-spacing:.09em;pointer-events:none;transition:opacity .2s}
.drawing-hint.hidden{opacity:0}
.feedback{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:36px;padding:0 15px;background:#20201d;border-top:1px solid #3d3d37;flex:none;font-size:10px;letter-spacing:.04em;font-weight:800}
.signal{display:flex;align-items:center;gap:8px;color:#f5ce53}.signal-light{height:7px;width:7px;border-radius:50%;background:#86877e}.signal-light.active{background:#39cd8a;box-shadow:0 0 9px #39cd8a}
.counter{color:#b5b0a4;white-space:nowrap}.slash{padding:0 4px;color:#5b5b54}
.controls{padding:11px 15px max(13px,env(safe-area-inset-bottom));flex:none;box-shadow:0 -4px 20px #0002}
.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.range{display:block;min-width:0}.range-header{display:flex;justify-content:space-between;gap:7px;color:#bdb8aa;font-size:10px;font-weight:900;letter-spacing:.09em}output{color:#f3ca49;letter-spacing:0}
.range-grid.fatboy-mode{grid-template-columns:1fr}.range-grid.fatboy-mode #angle-control{display:none}
.range-grid.drip-mode{grid-template-columns:1fr}.range-grid.drip-mode #angle-control{display:none}
.drip-control{display:none;margin:2px 0 7px}.lab.drip-mode .drip-control{display:block}
input[type=range]{width:100%;margin:10px 0 5px;accent-color:#f1c347;touch-action:pan-x}
.flow-row{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:3px 0 8px}
.flow-label{font-size:10px;font-weight:900;letter-spacing:.09em;color:#bdb8aa;white-space:nowrap}
.flow-choices{display:flex;gap:6px;flex:1;max-width:390px}
.flow-choice{flex:1;border-radius:6px;background:#292926;border:1px solid #4e4d46;color:#aaa79f;padding:6px 7px;font-size:10px;font-weight:900;letter-spacing:.06em;touch-action:manipulation}
.flow-choice.selected{background:#edc443;border-color:#edc443;color:#1c1c19}
.actions{display:flex;align-items:center;gap:7px;margin-top:5px}.explainer{font-size:10px;color:#908d84;line-height:1.3;flex:1;max-width:360px}
.action{border-radius:7px;padding:10px 12px;border:1px solid #555;white-space:nowrap;font-size:11px;font-weight:900;letter-spacing:.03em;touch-action:manipulation}
.secondary{color:#f2f1ea;background:#2a2a27}.primary{background:#f0c23d;color:#191916;border-color:#f0c23d}
@media(max-height:680px){.masthead{padding:8px 13px 5px}.headline{font-size:23px}.tool-picker{padding-bottom:4px}.tool-choice{padding:4px 8px}.palette{padding:5px 13px 9px}.controls{padding-top:7px;padding-bottom:8px}.feedback{min-height:29px}.flow-row{margin-bottom:5px}.actions{margin-top:1px}}
@media(max-width:440px){.eyebrow{font-size:8px}.version{font-size:8px;padding-left:3px}.explainer{display:none}.actions{justify-content:flex-end}.actions .action{flex:1}.masthead{padding-left:13px;padding-right:13px}.tool-picker{padding-left:13px;padding-right:13px}.tool-choice{padding:7px 6px}.tool-choice span{font-size:10px}.tool-choice small{font-size:8px}.palette{padding-left:13px;padding-right:13px}}

.draw-launch{padding:0 16px 10px;flex:none}
.draw-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;border:1px solid #f0c23d;border-radius:8px;background:#f0c23d;color:#191916;padding:10px 14px;font-size:18px;font-weight:950;font-style:italic;letter-spacing:.04em;touch-action:manipulation}
.draw-button span{font-size:10px;font-style:normal;letter-spacing:.09em}
.draw-toolbar{display:none}
.lab.drawing-mode{position:fixed;inset:0;max-width:none;width:100vw;height:100dvh;padding:0;z-index:10}
.drawing-mode>.masthead,.drawing-mode>.draw-launch,.drawing-mode>.tool-picker,.drawing-mode>.palette,.drawing-mode>.feedback,.drawing-mode>.controls{display:none}
.drawing-mode>.draw-toolbar{display:flex;align-items:center;gap:8px;flex:none;min-height:54px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));background:#151513}
#drawing-tool{flex:1;min-width:0;color:#f4ce59;font-size:11px;font-weight:900;font-style:italic;white-space:nowrap}
.drawing-mode .paper-label{top:10px;font-size:8px}
.drawing-mode .drawing-hint{display:none}
.drawing-mode .canvas-wrap{border:0}
@media(orientation:portrait){
 .lab.drawing-mode{inset:auto;left:50%;top:50%;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
}
@media(max-height:680px){.draw-launch{padding-bottom:6px}.draw-button{min-height:40px;padding:7px 12px}}
.surface-selector{padding:0 16px 6px;flex:none}
#choose-surface{width:100%;display:flex;align-items:center;gap:10px;background:#24251f;border:1px solid #655a34;border-radius:7px;padding:10px 12px;color:#f5e8b6;text-align:left;min-height:40px}
.surface-label{font-size:9px;font-weight:900;letter-spacing:.15em;color:#b7ae8e}
#surface-name{flex:1;font-size:12px}#surface-kind{font-size:8px;letter-spacing:.07em;color:#b7ae8e}
#surface-dialog{width:min(780px,96vw);max-height:90dvh;background:#191a16;color:#f8f5ec;border:1px solid #a48a32;border-radius:12px;padding:20px;overscroll-behavior:contain}
#surface-dialog::backdrop{background:#000b}
.surface-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.surface-dialog-header h2{margin:7px 0;font-size:32px;font-weight:950;font-style:italic}
#surface-rank{font-size:11px;letter-spacing:.08em;color:#f4ce59;font-weight:bold}#surface-status{font-size:12px;line-height:1.5;color:#d2cdbf;min-height:36px}
.surface-dialog-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:15px 0 20px;font-size:10px;font-weight:bold;letter-spacing:.08em}
.surface-dialog-actions a{color:#f4ce59}.surface-dialog-actions button{background:none;border:0;color:#eee2c0;text-decoration:underline;padding:0}
.surface-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.surface-card{text-align:left;background:#25261f;border:1px solid #5d5d4e;border-radius:8px;padding:0 0 12px;overflow:hidden;color:#f8f5ec;min-width:0}
.surface-card[aria-pressed=true]{outline:2px solid #f4ce59;border-color:#f4ce59}.surface-card canvas{display:block;width:100%;aspect-ratio:16/9;height:auto;border-bottom:1px solid #5d5d4e}
.surface-card strong,.surface-card small,.surface-lock{display:block;margin:9px 10px 0}.surface-card strong{font-size:12px;line-height:1.3}.surface-lock{font-size:9px;letter-spacing:.09em;color:#f4ce59}.surface-card small{font-size:10px;color:#b8b5a8}.surface-card.locked{border-style:dashed}.surface-card.locked .surface-lock{color:#d1cbbb}.surface-card.locked canvas{opacity:.65}
#scene{display:none;z-index:3;pointer-events:none}.placing #scene{display:block}.placing #ink{pointer-events:none}.placing .paper-label{display:none}
.placement-controls{position:absolute;z-index:4;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:12px;padding:9px 12px;background:#151513ed;border:1px solid #6b6039;border-radius:9px;color:#f5e8b6}
.placement-controls[hidden]{display:none}.placement-controls label{flex:1;min-width:0;font-size:9px;letter-spacing:.06em;font-weight:bold}.placement-controls output{float:right}.placement-controls #wall-picker{flex:1.3;min-width:100px}.placement-controls select{display:block;width:100%;margin-top:6px;background:#28251e;color:#fff2bb;border:1px solid #988448;border-radius:4px;padding:6px;font:inherit}.placement-controls input[type=range]{margin:6px 0 0}.placement-controls .action{padding:9px}
.drawing-notice{display:none}.drawing-mode .drawing-notice{display:block;position:absolute;z-index:4;left:12px;right:12px;top:8px;pointer-events:none;font-size:10px;text-align:center;color:#4b4535;text-shadow:0 1px #fff8}.placing .drawing-notice{background:#151513c9;color:#f8ecc9;text-shadow:none;padding:6px;border-radius:5px;left:20%;right:20%}
#place-art[hidden]{display:none}.drawing-mode .paper-label{top:28px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:500px){.surface-options{grid-template-columns:repeat(2,minmax(0,1fr))}#surface-dialog{padding:15px}#surface-kind{display:none}.surface-selector{padding:0 13px 5px}}
@media(max-height:500px){.placement-controls{gap:8px;padding:6px 9px}.placement-controls label{font-size:8px}.draw-toolbar .action{padding:8px;font-size:10px}#drawing-tool{font-size:10px}.placing .drawing-notice{top:5px;font-size:9px}}
.drawing-mode>.surface-selector{display:none}
.drawing-mode .drawing-notice{background:#151513bb;color:#f8ecc9;text-shadow:none;padding:5px;border-radius:5px;left:20%;right:20%}

/* Shared Blackbook collection and saved-piece detail. */
.gallery-launch{display:flex;flex-wrap:wrap;gap:9px;padding:8px 18px 0}
.gallery-launch .action{flex:1;min-width:150px;font-size:12px;border-color:#f0bd33}
.piece-title-label{display:flex;flex-direction:column;gap:5px;padding:8px 18px;color:#f0bd33;font-size:10px;font-weight:800;letter-spacing:.08em}
.piece-title-label input{width:100%;max-width:450px;background:#252627;border:1px solid #777;color:#fff;padding:10px 12px;border-radius:5px;font:inherit;font-size:14px;letter-spacing:normal}
.drawing-mode>.gallery-launch,.drawing-mode>.piece-title-label{display:none}
.blackbook-gallery,.blackbook-piece{box-sizing:border-box;width:min(95vw,980px);max-height:90dvh;overflow:auto;border:2px solid #f0bd33;border-radius:12px;background:#171819;color:#f5f0df;padding:18px;box-shadow:0 25px 70px #000c}
.blackbook-gallery::backdrop,.blackbook-piece::backdrop{background:#08090adb}
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.gallery-head h2{font-size:clamp(22px,4vw,34px);margin:4px 0;color:#f0bd33;letter-spacing:.035em}
.gallery-tabs,.piece-actions{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 16px}
.gallery-tabs .action[aria-pressed="true"]{background:#f0bd33;color:#151513}
.gallery-filter{display:flex;flex-direction:column;gap:6px;max-width:420px;margin-bottom:12px;font-size:11px;letter-spacing:.08em;font-weight:800}
.gallery-filter input{padding:12px;background:#27292c;border:1px solid #999;color:#fff;border-radius:5px;font-size:16px}
#gallery-message,#piece-message{min-height:1.4em;color:#f0bd33}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:13px}
.gallery-card{background:#292b2c;border:1px solid #626366;border-radius:9px;overflow:hidden;color:#f6f1e6;text-align:left;cursor:pointer;padding:0;display:flex;flex-direction:column;min-width:0}
.gallery-card img{width:100%;height:145px;object-fit:contain;background:#0c0d0e}
.gallery-card .gallery-caption{padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.gallery-card strong{font-size:14px;overflow-wrap:anywhere}
.gallery-card small{color:#f0bd33}
#gallery-more{margin:16px auto 0;display:block}
#gallery-more[hidden]{display:none}
.blackbook-piece{width:min(95vw,760px)}
#piece-image{display:block;width:100%;max-height:60dvh;object-fit:contain;background:#070809;border:1px solid #4b4c4d;border-radius:6px}
#piece-meta{font-size:13px;line-height:1.6;color:#e2ded2}
@media(max-width:500px){.blackbook-gallery,.blackbook-piece{padding:12px;max-height:95dvh}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gallery-card img{height:115px}.gallery-head .action{font-size:11px}.gallery-tabs .action{font-size:11px}.piece-actions .action{flex:1}}

.gallery-filter[hidden]{display:none}
.drawing-mode>.draw-toolbar{overflow-x:auto;scrollbar-width:thin}
.drawing-mode>.draw-toolbar .action{white-space:nowrap;flex-shrink:0}
@media(max-width:760px){.drawing-mode>.draw-toolbar{gap:4px}.drawing-mode>.draw-toolbar .action{padding:6px;font-size:9px}.drawing-mode #drawing-tool{display:none}}

/* Public graffiti alias is independent of the HHKD account name. */
.alias-panel{padding:12px 14px;margin:0 0 16px;background:#242627;border:1px solid #6d6a5d;border-radius:9px}
.alias-panel[hidden]{display:none}
.alias-panel label{display:block;margin:0 0 9px;color:#f0bd33;font-size:12px;font-weight:800;letter-spacing:.07em}
.alias-panel label span{font-size:11px;font-weight:400;letter-spacing:normal;color:#e6e2d8}
.alias-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.alias-controls input{flex:1;min-width:160px;background:#161718;color:#fff;border:1px solid #a19c8e;border-radius:5px;padding:10px 12px;font-size:16px}
.alias-controls .action{min-width:130px}
#alias-message{margin:9px 0 0;font-size:11px;color:#f0bd33;line-height:1.45}
@media(max-height:760px){
 .blackbook-piece{padding:10px;max-height:calc(100dvh - 18px)}
 .blackbook-piece .gallery-head{margin-bottom:8px}
 #piece-image{max-height:42dvh}
 .blackbook-piece .piece-actions{position:sticky;bottom:-10px;z-index:1;background:#171819;margin:7px 0 0;padding:7px 0}
}