/*! skraboutcha.com, © 2026 Skraboutcha, tous droits réservés */
:root{--paper: #FFFFFF}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font:13px/1.4 var(--serif);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:inherit}.app{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100vh}.stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden}#view,#frozen{display:block;grid-area:1 / 1}.bubbles{display:block;grid-area:1 / 1;pointer-events:none}#frozen[hidden],#sheet[hidden]{display:none}#sheet{display:block;grid-area:1 / 1;box-shadow:0 1px #0000000a,0 12px 40px #00000014}.fallback{color:var(--mute)}.sound{position:absolute;width:32px;height:32px;display:grid;place-items:center;color:var(--ink)}.sound:hover{opacity:.6}.sound svg{width:20px;height:20px;overflow:visible}.sound .body,.sound .waves,.sound .bar{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:square}.sound .waves{display:none}.sound.on .waves{display:block}.sound.on .bar{display:none}.panel{overflow-y:auto;padding:28px 28px 28px 4px;display:flex;flex-direction:column;gap:22px}.head .home{font:12px var(--mono);color:var(--mute);text-decoration:none}.head .home:before{content:"← "}.head .home:hover{color:var(--ink)}.head h1{margin:10px 0 0;font-size:34px;line-height:1;font-weight:500;letter-spacing:-.025em}.head .sub{margin:6px 0 0;color:var(--mute)}.block h2,.model summary{margin:0 0 12px;padding-top:10px;border-top:1px solid var(--rule);font:400 11.5px var(--mono);color:var(--mute)}.comps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}.comp{display:flex;flex-direction:column;align-items:center;gap:7px;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.comp canvas{width:46px;height:46px;border-radius:50%;outline:1px solid transparent;outline-offset:3px;transition:outline-color .15s}.comp:hover canvas{outline-color:var(--rule)}.comp.on{color:var(--ink)}.comp.on canvas{outline-color:var(--ink)}.dose{position:relative;display:flex;height:14px;margin-top:18px;cursor:ew-resize;touch-action:none}.dose:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--ink);pointer-events:none}.dose.free{cursor:default}.dose .part{min-width:0;flex-basis:0}.dose .cut{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;background:var(--ink);outline:none}.dose .cut:after{content:"";position:absolute;inset:0 -8px}.dose .cut:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--mute)}.field{display:grid;grid-template-columns:82px 1fr 64px;align-items:center;gap:10px;margin-top:14px;color:var(--mute)}.field[hidden]{display:none}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink)}input[type=range]::-moz-range-track{height:1px;background:var(--ink)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--ink)}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--ink)}input[type=range]:focus-visible{outline:1px dotted var(--mute);outline-offset:2px}@media(pointer:coarse){input[type=range]{height:36px}input[type=range]::-webkit-slider-thumb{box-sizing:border-box;width:35px;height:35px;margin-top:-17px;border:12px solid transparent;background-clip:padding-box}input[type=range]::-moz-range-thumb{box-sizing:border-box;width:35px;height:35px;border:12px solid transparent;background-clip:padding-box}}.paints{list-style:none;margin:0;padding:0}.paint{display:grid;grid-template-columns:18px 1fr auto 16px;align-items:center;gap:12px;height:34px;border-bottom:1px solid var(--rule)}.paint:first-child{border-top:1px solid var(--rule)}.chip{display:block;width:18px;height:18px;box-shadow:inset 0 0 0 1px #00000014}button.chip:hover{box-shadow:inset 0 0 0 1px #00000014,0 0 0 2px var(--bg),0 0 0 3px var(--rule)}.paint .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.paint .pct{font:12px var(--mono);font-variant-numeric:tabular-nums;color:var(--mute)}.paint .remove{color:var(--mute);font-size:15px;line-height:1}.paint .remove:hover{color:var(--ink)}.link{margin-top:12px;color:var(--mute)}.link:hover{color:var(--ink)}.link[disabled]{display:none}.paints-box{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px}.swap{width:26px;height:26px;display:grid;place-items:center;color:var(--mute)}.swap:hover{color:var(--ink);background:#0000000d}.swap svg{width:15px;height:15px;fill:currentColor}.transport{display:flex;align-items:center;gap:16px}.go{display:inline-flex;align-items:center;gap:9px;min-width:148px;height:38px;padding:0 18px 0 15px;border-radius:19px;background:var(--ink);color:var(--bg);font-weight:500}.go:hover{background:#000}.go[disabled]{opacity:.55;cursor:progress}.go svg{width:13px;height:13px;fill:currentColor}.go path{display:none}.go[data-icon=play] .i-play,.go[data-icon=pause] .i-pause,.go[data-icon=back] .i-back,.go[data-icon=restart] .i-restart{display:block}.transport .link{margin:0}#clock{margin-left:auto;font:12px var(--mono);font-variant-numeric:tabular-nums;color:var(--mute)}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--ink);border-radius:17px;overflow:hidden}.segmented button{height:32px;padding:0 4px;font-size:12.5px}.segmented button+button{border-left:1px solid var(--ink)}.segmented button:hover{background:#0000000f}.segmented button.on{background:var(--ink);color:var(--bg)}.segmented.small button{height:26px;font-size:12px}.segmented+.segmented{margin-top:8px}.lab-row{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px;margin-top:8px;color:var(--mute)}.lab-row[hidden],.sheet-actions[hidden]{display:none}.sheet-actions{display:flex;flex-wrap:wrap;gap:0 18px}#sheet-view+.lab-row{margin-top:10px}.field output{font:11px var(--mono);text-align:right;font-variant-numeric:tabular-nums}#copy-settings{margin-top:12px}.model .field{grid-template-columns:84px 1fr 64px}#copy-settings.copied:after{content:" ✓"}.final{display:flex;align-items:center;gap:14px}.final-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.near{font:11.5px var(--mono);color:var(--mute)}.chip.big{width:44px;height:44px;box-shadow:none;border:1px dashed var(--rule);background:transparent}.final.ready .chip.big{border:0}.hex{font:20px var(--mono);letter-spacing:.02em}.final:not(.ready) .hex{color:var(--mute);cursor:default}.final.ready .hex:hover:after{content:" copier";font:11px var(--mono);color:var(--mute)}.final.ready .hex.copied:after{content:" copié ✓";font:11px var(--mono);color:var(--mute)}.model summary{cursor:pointer;list-style:none}.model summary::-webkit-details-marker{display:none}.model summary:after{content:" +"}.model[open] summary:after{content:" –"}.note{margin:10px 0 0;font:11px/1.5 var(--mono);color:var(--mute)}.credit{margin-top:auto;padding-top:12px;font:11px var(--mono);color:var(--mute)}.credit a:hover{color:var(--ink)}.status{margin:10px 0 0;font-size:12px;color:var(--ink)}.link.busy{opacity:.4;pointer-events:none}.preparing .panel .block:not(.mixing){opacity:.45;pointer-events:none}.readout{margin:10px 0 0;font:11px/1.6 var(--mono);color:var(--mute);white-space:pre-line}.picker{position:fixed;z-index:10;width:262px;padding:14px;background:var(--paper);box-shadow:0 0 0 1px var(--ink)}.swatches .family{margin:12px 0 6px;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.swatches .family:first-child{margin-top:0}.swatches .row{display:grid;grid-template-columns:repeat(7,24px);gap:8px}.swatches .chip{width:24px;height:24px}.swatches .chip.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}.picker .label{margin-top:12px;min-height:1.4em;color:var(--mute);font:11px var(--mono)}@media(max-width:820px)and (orientation:portrait){.app{grid-template-columns:1fr;height:auto}.stage{position:sticky;top:0;z-index:2;height:min(100vw,56vh);background:var(--bg);box-shadow:0 1px 0 var(--rule)}.panel{padding:8px 16px 32px;overflow:visible}.head{order:-1}}@media(max-height:500px)and (orientation:landscape){.app{grid-template-columns:minmax(0,1fr) 270px;height:100vh;height:100dvh}.panel{padding:16px 16px 16px 4px;gap:18px}}.caption{margin-top:12px}.caption textarea{display:block;width:100%;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:transparent;color:var(--ink);font:12px/1.5 var(--serif);resize:vertical}.caption textarea:focus{outline:none;border-color:var(--mute)}.caption .link{margin-top:8px}.embed .app{grid-template-columns:1fr;height:100vh}.embed .stage{position:static;height:100vh;box-shadow:none}.embed .panel,.embed .sound{display:none}