*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button,.file-button{border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink);background:transparent;border-radius:4px;padding:10px 13px;cursor:pointer;font-size:12px;min-height:40px}button:hover,.file-button:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button[aria-pressed=true]{box-shadow:inset 0 -3px var(--accent)}main{min-height:100dvh;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}header{padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent);gap:20px}.brand{display:flex;align-items:center;gap:16px}.brand strong{font-size:22px;line-height:.95;letter-spacing:-1px}.brand small{display:block;font-size:8px;letter-spacing:1.6px;margin-top:10px}.mark{font-size:56px;font-weight:200}.toolbar{display:flex;gap:8px}.solid{background:var(--ink);color:var(--paper)}.workspace{display:flex;flex:1;min-height:0}.canvas{flex:1;min-width:0;padding:26px 32px 12px;display:flex;flex-direction:column}.canvas-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;gap:12px}.art{width:100%;min-height:360px;flex:1;touch-action:none;overflow:visible;-webkit-user-select:none;user-select:none}.canvas-bottom{display:flex;align-items:end;justify-content:space-between;gap:15px}.canvas-bottom p{font-size:clamp(23px,3vw,43px);line-height:1.05;letter-spacing:-1.5px;margin:0}.canvas-bottom em{font-family:Georgia,serif;font-weight:400}.canvas-bottom>div{display:flex;gap:6px;flex-wrap:wrap;justify-content:end}.status{font-size:12px;min-height:28px;opacity:.75;margin:24px 0 0}aside{width:320px;flex-shrink:0;padding:27px 22px;border-left:1px solid color-mix(in srgb,var(--ink) 25%,transparent);max-height:calc(100dvh - 130px);overflow:auto}.section-title{font-size:9px;letter-spacing:1.6px;margin-bottom:20px}.word{display:block;font-size:11px}.word input{display:block;background:transparent;width:100%;border:0;border-bottom:1px solid var(--ink);color:var(--ink);font-size:28px;padding:10px 0;letter-spacing:2px;margin-bottom:10px}.letter-picker{display:flex;gap:3px;flex-wrap:wrap;margin:24px 0}.letter-picker button{flex:1;padding:8px;min-width:28px}.letter-picker small{display:block;font-size:8px;margin-top:4px;opacity:.6}.readout{display:flex;align-items:center;gap:15px}.readout strong{font-size:46px;letter-spacing:-3px;font-weight:500}.readout span{font-size:9px;line-height:1.8;letter-spacing:1px}.hint{font-size:11px;line-height:1.6;opacity:.7}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.field{font-size:10px;display:flex;flex-direction:column;gap:6px}.field input{min-width:0;width:100%;padding:8px;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:3px;background:transparent;min-height:38px}.weight{border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);padding-bottom:12px}.weight button{margin-right:5px}.palette{display:flex;gap:8px;margin:22px 0}.palette button{flex:1;font-family:Georgia,serif;font-size:22px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.file-button{position:relative;text-align:center;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-button:focus-within{outline:3px solid var(--accent)}details{border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);padding-top:15px;font-size:11px;margin-top:20px}footer{display:flex;justify-content:space-between;padding:13px 32px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);font-size:8px;letter-spacing:1.2px;gap:15px}@media(min-width:1500px){.art{min-height:550px}aside{width:360px}}@media(max-width:850px){header{padding:16px}.toolbar{flex-wrap:wrap;justify-content:end}.toolbar button{font-size:10px;padding:8px}.workspace{flex-direction:column}.canvas{padding:22px 16px}.art{min-height:290px}aside{width:100%;max-height:none;border-left:0;border-top:1px solid var(--ink);padding:22px}.canvas-bottom{align-items:start}.canvas-bottom>div{max-width:220px}.canvas-heading{font-size:8px}.brand strong{font-size:18px}.mark{display:none}footer{padding:16px;font-size:7px}.fields{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
