@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Permanent+Marker&display=swap');
:root{--tile:#c4d442;--ink:#171914}*{box-sizing:border-box}body{margin:0;background:#20231e;color:var(--ink);font-family:Arial,sans-serif}button{font:inherit;cursor:pointer;color:inherit;border-radius:0;touch-action:manipulation}button:focus-visible{outline:3px solid #ed4a24;outline-offset:4px}body:before{content:'';position:fixed;inset:0;background:linear-gradient(92deg,transparent 97%,#252b2450 98%),linear-gradient(0deg,transparent 96%,#252b2470 97%);background-size:107px 94px;background-color:var(--tile);transition:background-color 1s}#app{position:relative;max-width:460px;height:100dvh;min-height:440px;margin:auto;padding: max(15px,env(safe-area-inset-top)) 23px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;background:linear-gradient(110deg,#ffffff13,#00000008);border-inline:1px solid #30302040}header{display:flex;justify-content:space-between;align-items:center;height:53px;flex-shrink:0;border-bottom:2px solid; padding-bottom:10px}.brand{background:none;border:0;padding:0;display:flex;gap:8px;align-items:center;text-align:left;font:bold 20px/1 'Barlow Condensed',sans-serif}.brand small{display:block;letter-spacing:4px;font-size:11px;margin-top:5px}.logo{font:bold 32px 'Permanent Marker',cursive;border:3px solid;transform:rotate(-6deg);padding:0 3px}.edition{font:bold 9px/1.5 monospace;text-align:right}.screen{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;gap:10px;padding:16px 0 10px}[hidden]{display:none!important}.eyebrow{font:bold 10px monospace;letter-spacing:1.3px}h1{font:900 clamp(58px,11dvh,94px)/.86 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:-2px;margin:0;transform:rotate(-3deg)}h1 span{color:transparent;-webkit-text-stroke:2px var(--ink)}.scribble{font:18px 'Permanent Marker',cursive;transform:rotate(-6deg);text-align:right}.paper{background:#f9f8ed;border:2px solid;box-shadow:4px 4px 0 #171914;transform:rotate(-1.6deg);padding:12px 15px}.intro{font:bold 17px/1.3 monospace;width:85%;margin:2px 0}.choose>span{font:bold 10px monospace;letter-spacing:1px}.duration{display:flex;gap:10px;margin-top:8px}.duration button{flex:1;background:#f5f2dc80;border:2px solid;padding:8px;font:800 30px 'Barlow Condensed',sans-serif}.duration button small{font:12px monospace}.duration button[aria-pressed=true]{background:var(--ink);color:#fff}.primary{background:var(--ink);color:#faf8ee;border:2px solid var(--ink);padding:15px 12px;font:bold 17px 'Barlow Condensed',sans-serif;letter-spacing:1px;min-height:48px}.primary b{float:right;font-size:22px}.micro{font:11px monospace;margin:0;text-align:center}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid;padding-top:10px;flex-shrink:0;font:bold 8px monospace}footer button{border:0;background:none;font:bold 10px monospace;padding:8px 0}.timerline{display:flex;align-items:center;justify-content:space-between}#timer{font:800 clamp(55px,10dvh,80px)/1 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums}.stamp{font:21px/.95 'Permanent Marker',cursive;transform:rotate(9deg);border:3px solid;padding:8px}.progress{height:6px;background:#17191430}.progress i{display:block;background:var(--ink);height:100%;width:0}.direction{display:flex;align-items:center;justify-content:space-between;gap:8px}.direction h2{font:800 30px 'Barlow Condensed',sans-serif;margin:0}.direction>span{font:bold 11px monospace;background:var(--ink);color:white;padding:7px}.mouth{position:relative;flex:1;min-height:100px;max-height:290px;display:flex;flex-direction:column}.mouth svg{width:100%;height:100%;min-height:0;overflow:visible}.mirror{text-align:center;font:8px monospace;letter-spacing:2px}.sideLabels{display:flex;justify-content:space-between;font:bold 8px monospace}.jawLabel{font:bold 9px monospace;letter-spacing:2px;fill:#17191480}.tooth{fill:#777e6170;stroke:#17191480;stroke-width:1.5}.tooth.active{fill:#fffdf0;stroke:#171914;stroke-width:2.4}.tooth.current{fill:#ff6d3e;stroke:#171914;stroke-width:3}.quarter{fill:#17191408;stroke:#17191422;stroke-width:1}.quarter.active{fill:#fffef54a;stroke:#171914;stroke-width:3;stroke-dasharray:5 3}.tip{min-height:80px}.tip>span{font:bold 8px monospace;letter-spacing:1px}.tip p{font:bold 15px/1.25 monospace;margin:5px 0 0}.controls{display:flex;gap:10px}.controls .primary{flex:1}.reset{background:transparent;border:2px solid;font:bold 12px monospace;padding:0 15px}.after h2{font:bold 21px 'Barlow Condensed',sans-serif;margin:0}.after p{font:13px/1.4 monospace}.paused #brushDrawing{animation:none!important}#brushDrawing{animation:scrub .26s infinite alternate;transform-box:fill-box;transform-origin:center}@keyframes scrub{from{transform:translate(-2px,-1px) rotate(-3deg)}to{transform:translate(2px,1px) rotate(3deg)}}dialog{background:#faf8ed;border:3px solid;max-width:min(90vw,400px);padding:25px;max-height:85dvh}dialog::backdrop{background:#111b}dialog h2{font:800 30px 'Barlow Condensed',sans-serif}dialog p{font:14px/1.5 monospace}dialog a{color:inherit}#close{float:right;background:none;border:0;font-size:30px}@media(max-height:700px){#app{padding-top:8px;padding-bottom:5px}.screen{gap:7px;padding:10px 0 7px}header{height:45px}h1{font-size:clamp(52px,10dvh,70px)}.intro{padding:8px 12px;font-size:14px}.scribble{font-size:15px}.duration button{padding:4px}.primary{padding:10px;min-height:44px}.tip{min-height:69px;padding:7px 11px}.tip p{font-size:13px}.direction h2{font-size:26px}#timer{font-size:55px}.stamp{font-size:17px}footer{padding-top:3px}.after p{font-size:12px}}@media(prefers-reduced-motion:reduce){#brushDrawing{animation:none}body:before{transition:none}}
@media(max-height:540px){#app{padding-top:12px}.screen{gap:5px;padding:7px 0}#start h1{font-size:45px}#start .intro{font-size:12px;padding:7px 10px}#start .scribble{font-size:13px}.duration button{font-size:25px;padding:3px}.micro{font-size:9px}header{height:42px}.brand{font-size:18px}.logo{font-size:27px}#timer{font-size:46px}.tip p{font-size:12px}.tip{min-height:64px}.after p{font-size:11px;margin:8px 0}.after{padding:9px 12px}}
/* Monotel's original tiled wall: preserve grout, glaze and irregular marks. */
:root{--tile:#df201c;--tile-hue:0deg}
body:before{background:#df201c url('assets/tiles-red.png') center top / 377px 438px repeat;filter:hue-rotate(var(--tile-hue));transition:filter .7s ease}
#app{background:#fff5e615;border-inline:1px solid #0002}
header{height:68px;padding-bottom:8px}.brand{gap:10px}.brand .logo{width:92px;height:auto;border:0;transform:none;padding:0}.brand>span{background:#f7f5ed;padding:6px;border:2px solid #111;font-size:19px}.brand small{letter-spacing:2px;font-size:10px}.edition{color:#fff7e9;text-shadow:1px 1px #56110d}
.eyebrow,.choose>span,.mirror,.sideLabels,.micro,footer{color:#fff9ee;text-shadow:1px 1px 1px #27100e}
#start h1,#done h1{color:#faf5e9;text-shadow:3px 3px #171914}#start h1 span,#done h1 span{color:transparent;-webkit-text-stroke:2px #faf5e9;text-shadow:none}.scribble{color:#fff9ee;text-shadow:2px 2px #171914}
#timer{color:#fff9ee;text-shadow:3px 3px #171914}.stamp{background:#f8f5e8;box-shadow:3px 3px #171914}.direction h2{background:#faf7eb;padding:2px 9px;box-shadow:3px 3px #171914}.mouth{background:#f6efd9e8;border:2px solid #171914;padding:7px;box-shadow:3px 3px #171914}.mouth .mirror,.mouth .sideLabels{color:#171914;text-shadow:none}.reset{background:#faf5e9}.duration button{background:#faf5e9}.progress{background:#fff8}.progress i{background:#faf5e9}footer button{color:#fff9ee}
@media(max-height:700px){header{height:57px}.brand .logo{width:78px}.brand>span{font-size:17px;padding:4px}.brand small{font-size:9px}.direction h2{font-size:25px}}
@media(max-height:540px){header{height:49px}.brand .logo{width:67px}.brand{gap:6px}.brand>span{font-size:15px}.brand small{font-size:8px}.edition{font-size:8px}.mouth{padding:4px}.direction h2{font-size:22px}.tip{min-height:60px}}
@media(prefers-reduced-motion:reduce){body:before{transition:none}}

/* A complete repeating grid prevents narrow fragments at image seams. */
body:before{background-color:var(--tile);background-image:url('assets/tile-grid.svg');background-size:236px 236px;background-position:center top;filter:none;transition:background-color .7s ease}
.direction{display:block}.direction h2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:3px 10px;padding:5px 9px;margin:0;font-size:29px;line-height:1.05}.direction #surface{font:800 27px/1.05 'Barlow Condensed',sans-serif;border-left:2px solid #171914;padding-left:10px}.direction #surface:before{content:none}
@media(max-height:700px){.direction h2{font-size:26px}.direction #surface{font-size:24px}}
@media(max-width:350px){.direction h2{font-size:24px;gap:2px 7px}.direction #surface{font-size:21px;padding-left:7px}}
@media(prefers-reduced-motion:reduce){body:before{transition:none}}

/* Small wall-mounted digital clock, centered independently of the logo. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:5px}.brand{justify-self:start}.edition{justify-self:end}.wall-clock{width:105px;background:#1a1b16;border:2px solid #111;box-shadow:2px 2px 0 #0007,inset 0 0 0 1px #ffffff20;color:#f5c97a;text-align:center;padding:4px 3px 3px;transform:rotate(-1deg)}#clockDate{display:block;font:700 10px/1.2 monospace;white-space:nowrap;letter-spacing:-.3px}#clockTime{display:block;font:700 27px/1.05 'Courier New',monospace;font-variant-numeric:tabular-nums;letter-spacing:1px;text-shadow:0 0 6px #ffb34e75}
@media(max-height:700px){.wall-clock{padding:3px}#clockTime{font-size:25px}}
@media(max-width:350px){.wall-clock{width:94px}#clockDate{font-size:9px}#clockTime{font-size:23px}.edition{font-size:7px}.brand>span{font-size:15px}.brand small{font-size:8px;letter-spacing:1.5px}}