:root{font-family:ui-monospace,"SF Mono",Menlo,monospace;color:#111;background:#fff;font-size:16px}*{box-sizing:border-box}body{margin:0}header{padding:18px 3%;border-bottom:1px solid #bbb;font-size:11px;letter-spacing:.08em}a{color:inherit;text-decoration:none}main{padding:22px 3%}h1{font:400 36px Garamond,serif;margin:0}p{color:#555}.work{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px}fieldset{border:1px solid #aaa;padding:10px;margin:0}.export-controls{margin-top:12px}label{display:block;margin-top:8px}select,input,textarea{width:100%;margin-top:3px;font:inherit}textarea{resize:vertical;box-sizing:border-box}button{font:inherit;background:#fff;border:1px solid #999;padding:5px 8px}fieldset>button{width:100%;margin-top:7px;padding:5px}fieldset hr{margin:9px 0 2px}#picks{padding-left:18px;line-height:1.45}.outputs{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,1fr);gap:28px}.outputs figure{margin:0;min-width:0}.outputs figcaption{font-size:11px;letter-spacing:.08em;margin-bottom:8px}.viewport{aspect-ratio:var(--paper-aspect,297 / 420);width:min(100%,calc(72vh * var(--paper-aspect,297 / 420)));height:auto;max-height:72vh;margin-inline:0;position:relative;background:#f5f5f5;border:1px solid #aaa;overflow:hidden}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.export-viewport{border:1px solid #aaa;background:#f5f5f5}.export-viewport svg{display:block;width:100%;height:auto;max-height:72vh;background:#fff}.view{display:flex;gap:6px;align-items:center;margin-top:8px}.info,.export-info{margin-top:9px;padding:8px;border-top:1px solid #aaa;color:#444;font:12px/1.5 ui-monospace,"SF Mono",Menlo,monospace}.meta{margin-top:12px;text-align:center;color:#555}.range-value{display:block;margin-top:1px;color:#555;font:inherit}@media(max-width:980px){.work{grid-template-columns:1fr}}@media(max-width:680px){.outputs{grid-template-columns:1fr}.viewport{width:min(100%,calc(64vh * var(--paper-aspect,297 / 420)));max-height:64vh}.export-viewport svg{max-height:64vh}}
/* Compact control toolbar */
#controls{font-size:12px;line-height:1.2}#controls fieldset{padding:7px 8px}#controls label{margin-top:5px}#controls select,#controls input,#controls textarea{margin-top:2px;min-height:22px}#controls input[type="range"]{min-height:14px}#controls fieldset>button{margin-top:5px;padding:4px 6px}#controls fieldset hr{margin:6px 0 1px}#controls .range-value{font-size:11px;line-height:1;margin-top:0}#controls textarea{min-height:42px}#controls .export-controls{margin-top:8px}#controls #picks{margin:7px 0 0;padding-left:16px}

/* Shared compact control type and button treatment */
#controls,#controls input,#controls select,#controls textarea,#controls button{font:12px/1.35 ui-monospace,"SF Mono",Menlo,monospace}#controls button{min-height:24px;padding:3px 6px;border:1px solid #777;background:#fff}#controls fieldset>button{padding:3px 6px}#controls .view button{padding:3px 6px}

#controls button:hover,#controls button:focus-visible{background:#f1f1f1;color:#151515;border-color:#999;outline:none}#controls button:focus-visible{box-shadow:0 0 0 2px #aaa}

/* Flow Field Test preview and control conventions */
#controls fieldset{border:1px solid #aaa;padding:14px;margin:0}#controls label{display:block;margin-top:10px}#controls select,#controls input,#controls textarea{width:100%;margin-top:5px}.outputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.outputs figure{margin:0}.outputs figcaption{margin-bottom:8px;font:11px/1.35 ui-monospace,"SF Mono",Menlo,monospace}.viewport,.export-viewport{background:#eee;border:1px solid #aaa}.viewport{margin-inline:0}.export-viewport{overflow:hidden;position:relative}.export-viewport #export-plane{line-height:0;background:#fff}.export-viewport svg{width:100%;height:auto;display:block}.view{gap:6px;margin-top:8px}.view button{font:12px/1.35 ui-monospace,"SF Mono",Menlo,monospace;background:#fff;border:1px solid #999;padding:5px 8px}.info,.export-info{margin-top:9px;padding:8px;border-top:1px solid #aaa;color:#444;line-height:1.5}.meta{margin-top:12px;text-align:center}.range-value{font-size:11px}

/* Noise Field control dock and navigation pattern */
#controls{border:1px solid #aaa;padding:0;background:#fff}#controls fieldset{border:0;border-bottom:1px solid #aaa;padding:12px 18px}#controls fieldset:last-child{border-bottom:0}#controls legend{padding:0 2px}#controls fieldset>button{width:100%;margin-top:10px;background:#fff;border:1px solid #151515;padding:8px}#controls #download-svg{background:#151515;color:#fff;border-color:#151515}#controls button:hover,#controls button:focus-visible{background:#f1f1f1;color:#151515;border-color:#151515}#controls #download-svg:hover,#controls #download-svg:focus-visible{background:#333;color:#fff}.view{justify-content:center}.view button{min-width:44px}.view #orbit{background:#151515;color:#fff;border-color:#151515}.view #orbit:hover{background:#333}.outputs{align-items:start}.outputs figure{min-width:0}

/* ISO paper platen: mirrors Noise Field preview */
.export-viewport{height:70vh;display:flex;align-items:center;justify-content:center;padding:0;background:#eee}.export-viewport #export-plane{width:auto;line-height:0;background:#fff;border:0}.export-viewport #export-plane svg{display:block;width:100%;height:100%;background:#fff}@media(max-width:680px){.export-viewport{height:55vh}.export-viewport #export-plane{height:calc(55vh - 2px)!important}}

.export-panel .export-controls{margin-top:12px;border:1px solid #aaa;padding:12px 18px}.export-panel .export-controls label{margin-top:8px}.export-panel .export-controls button{width:100%;margin-top:10px;padding:8px;background:#151515;color:#fff;border:1px solid #151515}.export-panel .export-controls button:hover{background:#333}.export-view{margin-top:12px}

#export-plane{transform-origin:center center}.export-view #export-hand.active{background:#151515;color:#fff;border-color:#151515}

/* Fixed control and data alignment */
.view{justify-content:flex-start}.info,.meta,.export-info{font:12px/1.5 ui-monospace,"SF Mono",Menlo,monospace;text-align:left}.info span,.meta span,.export-info span{display:inline-block;margin:0 12px 4px 0}.meta{margin-top:9px}.pick-restore{width:100%;text-align:left;margin-top:4px}

/* SVG export uses the shared compact control system after it is moved beside the platen. */
.export-panel .export-controls,.export-panel .export-controls input,.export-panel .export-controls select,.export-panel .export-controls button{font:12px/1.35 ui-monospace,"SF Mono",Menlo,monospace}.export-panel .export-controls{padding:8px 10px;text-align:left}.export-panel .export-controls label{margin-top:5px}.export-panel .export-controls select,.export-panel .export-controls input{margin-top:2px;min-height:22px}.export-panel .export-controls button{width:auto;min-height:24px;margin-top:8px;padding:3px 8px;background:#fff;color:#111;border:1px solid #777}.export-panel .export-controls button:hover,.export-panel .export-controls button:focus-visible{background:#f1f1f1;color:#111;border-color:#151515}

/* Controls are fixed at the readable site standard. */
#controls,#controls *,.view,.view *,.export-panel .export-controls,.export-panel .export-controls *{font-size:12px!important}

.png-info{margin-top:9px;padding:8px;border-top:1px solid #aaa;color:#444;font:12px/1.5 ui-monospace,"SF Mono",Menlo,monospace;text-align:left}