@font-face{font-family:"DM Sans";src:url("./fonts/ui.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("./fonts/sans.woff") format("woff");font-weight:500 900;font-display:swap}
:root{--font-body:"DM Sans",sans-serif;--font-display:"DM Sans",sans-serif;--text-xs:clamp(.75rem,.73rem + .08vw,.8125rem);--text-sm:clamp(.875rem,.85rem + .08vw,.9375rem);--text-base:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--color-bg:#151515;--color-surface:#1c1c1c;--color-text:#f3f3f3;--color-muted:#aaa;--color-border:#ffffff18;--color-white:#fff;--color-black:#000;--radius-sm:4px;--transition-interactive:160ms ease-out}
*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}body{font:var(--text-sm)/1.5 var(--font-body);background:var(--color-bg);color:var(--color-text);min-height:100dvh}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;min-height:44px}button,input,select,textarea{transition:background var(--transition-interactive),border-color var(--transition-interactive),color var(--transition-interactive)}button:hover{background:#ffffff0b}button:active{background:#ffffff14}button:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:2px solid var(--color-white);outline-offset:3px}select,input[type=number],textarea{background:#ffffff05;border:1px solid var(--color-border);border-radius:var(--radius-sm)}select{width:100%;min-height:44px;padding:var(--space-2) var(--space-3);color-scheme:dark}select option{background:var(--color-surface)}textarea{resize:vertical;width:100%;padding:var(--space-3);font-size:var(--text-lg);line-height:1.4}h1,h2{font-family:var(--font-display);line-height:1.2}h2{font-size:var(--text-sm);font-weight:600}.mono{font-family:ui-monospace,monospace;font-size:var(--text-xs);letter-spacing:.035em}.muted{color:var(--color-muted)}.small{font-size:var(--text-xs)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:-100px;left:16px;z-index:100;background:white;color:black;padding:12px}.skip:focus{top:8px}[hidden]{display:none!important}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);border-bottom:1px solid var(--color-border)}.identity{display:flex;align-items:center;gap:var(--space-6)}h1{font-size:var(--text-xl);font-weight:700;letter-spacing:-.06em}h1 span{color:#888;padding:0 var(--space-1)}.tagline{font-size:var(--text-xs);letter-spacing:.1em;color:var(--color-muted)}.header-actions{display:flex;gap:var(--space-2)}.quiet{padding:var(--space-2) var(--space-4);color:var(--color-muted)}.primary{background:var(--color-white);color:var(--color-black);padding:var(--space-2) var(--space-5);border-radius:var(--radius-sm);font-weight:600;display:flex;gap:var(--space-6);align-items:center;justify-content:space-between}.primary:hover{background:#d7d7d7}
.studio{display:grid;grid-template-columns:264px minmax(300px,1fr) 280px;height:calc(100dvh - 76px);min-height:650px}.panel{background:var(--color-surface);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555 transparent;min-width:0}.source-panel{border-right:1px solid var(--color-border)}.panel section{padding:var(--space-5);border-bottom:1px solid var(--color-border)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);gap:var(--space-2)}.section-heading .mono{color:var(--color-muted)}.field{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}.field label{color:var(--color-muted);font-size:var(--text-xs)}.text-button{font-size:var(--text-xs);text-align:left}.text-button .muted{display:block;font-size:var(--text-xs)}#upload-font{margin-top:var(--space-2)}.notice{font-size:var(--text-xs);color:var(--color-muted);overflow-wrap:anywhere}.notice:empty{display:none}.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.shape-choice{border:1px solid var(--color-border);border-radius:var(--radius-sm);height:78px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-muted)}.shape-choice svg{width:28px;height:28px}.shape-choice[aria-pressed=true]{background:var(--color-white);color:var(--color-black);border-color:var(--color-white)}.control{margin-bottom:var(--space-3)}.control:last-child{margin-bottom:0}.control-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.control label{font-size:var(--text-xs);color:#c9c9c9}.number-wrap{display:flex;align-items:center;gap:var(--space-1);color:var(--color-muted);font-size:var(--text-xs)}input[type=number]{width:58px;min-height:32px;text-align:right;padding:var(--space-1);font-family:ui-monospace,monospace;font-size:var(--text-xs);-moz-appearance:textfield}input::-webkit-inner-spin-button{appearance:none}input[type=range]{appearance:none;display:block;width:100%;height:28px;background:transparent;cursor:pointer;accent-color:white}input[type=range]::-webkit-slider-runnable-track{background:#555;height:2px}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:white;border-radius:50%;margin-top:-4px}input[type=range]::-moz-range-track{background:#555;height:2px}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;background:white;border-radius:50%}.switch-row{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:#ccc}.switch-row input{appearance:none;width:30px;height:18px;background:#555;border-radius:12px;position:relative;cursor:pointer;flex-shrink:0}.switch-row input:after{content:"";width:12px;height:12px;background:#bbb;position:absolute;top:3px;left:3px;border-radius:50%}.switch-row input:checked{background:#eee}.switch-row input:checked:after{left:15px;background:#111}.switch-row input:disabled{opacity:.4}.panel-foot{padding:var(--space-6) var(--space-5);color:var(--color-muted)}.panel-foot p{font-size:var(--text-xs);margin-top:var(--space-2)}
.work-area{display:flex;flex-direction:column;min-width:0;padding:0 var(--space-6);background:#151515}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:60px;gap:var(--space-2);color:var(--color-muted)}.canvas-toolbar button{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.canvas-toolbar button[aria-pressed=true]{color:white;text-decoration:underline;text-underline-offset:6px}.stage-wrap{flex:1;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden}.artboard{position:relative;width:min(100%,calc(100dvh - 290px));aspect-ratio:1;background:var(--color-black);border:1px solid #ffffff12;cursor:grab;touch-action:none}.artboard:active{cursor:grabbing}#art{display:block;width:100%;height:100%;overflow:hidden}.loading{position:absolute;inset:0;display:grid;place-items:center;background:black;color:#aaa;font-size:var(--text-xs)}.canvas-meta{display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-muted);padding:var(--space-4) 0}.transport{border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) 0}.play-button{background:var(--color-white);color:var(--color-black);min-width:44px;border-radius:50%;font-size:var(--text-sm)}.play-button:hover{background:#ddd}.restart{font-size:var(--text-lg);color:var(--color-muted);min-width:36px}.timeline-wrap{flex:1;min-width:0}.timeline-labels{display:flex;justify-content:space-between;color:var(--color-muted)}.timeline-wrap input{height:24px}.loop-label{color:var(--color-muted);margin-left:var(--space-3)}.workspace-note{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) 0 var(--space-5);font-size:var(--text-xs);color:var(--color-muted)}
.inspector{border-left:1px solid var(--color-border);display:flex;flex-direction:column}.tabs{display:flex;border-bottom:1px solid var(--color-border);padding:0 var(--space-5);gap:var(--space-6);min-height:60px}.tabs button{font-size:var(--text-sm);color:var(--color-muted);border-bottom:2px solid transparent}.tabs button[aria-selected=true]{color:var(--color-white);border-color:var(--color-white)}.inspector-tip{font-size:var(--text-xs);color:var(--color-muted);padding:var(--space-5)}.inspector-bottom{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6) var(--space-5);font-size:var(--text-xs)}.inspector-bottom .mono{color:#bbb}.motion-list{display:flex;flex-direction:column;gap:var(--space-2)}.motion-choice{text-align:left;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);font-size:var(--text-sm)}.motion-choice span{display:block;font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-1)}.motion-choice[aria-pressed=true]{border-color:#ddd;background:#ffffff09}.motion-choice[aria-pressed=true]:before{content:"●";float:right;font-size:var(--text-xs)}
dialog{margin:auto;background:var(--color-surface);color:var(--color-text);border:1px solid #555;border-radius:8px;padding:var(--space-8);width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:var(--space-6)}.dialog-head h2{font-size:var(--text-xl);margin-top:var(--space-2)}.eyebrow{color:var(--color-muted)}.close{font-size:var(--text-xl);width:44px;margin-top:calc(-1 * var(--space-2))}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.export-option{text-align:left;border:1px solid var(--color-border);padding:var(--space-4);border-radius:var(--radius-sm)}.export-option strong{display:block;font-weight:500;font-size:var(--text-base)}.export-option span{display:block;font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-1)}.export-option.selected{border-color:#ddd;background:#ffffff09}.export-description{font-size:var(--text-sm);color:#ccc;margin:var(--space-4) 0;min-height:44px}.export-go{width:100%;margin-top:var(--space-4)}.embed-button{width:100%;text-align:center;margin:var(--space-2) 0}#embed-code{font-family:monospace;font-size:var(--text-xs);height:120px;margin-bottom:var(--space-4)}.export-status{font-size:var(--text-xs);overflow-wrap:anywhere}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:var(--space-3) var(--space-5);background:#eee;color:#111;border-radius:var(--radius-sm);z-index:10;opacity:0;pointer-events:none;max-width:calc(100vw - 32px);font-size:var(--text-sm)}.toast.visible{opacity:1}.toast:empty{display:none}
/* Responsive editor shell: the work surface stays visible while controls scroll. */
:root{--header-height:72px}
html,body{height:100%;overflow:hidden}
.topbar{height:var(--header-height);gap:var(--space-4)}
.identity{min-width:0;gap:var(--space-4)}
.identity h1{white-space:nowrap;flex-shrink:0}
.internauts-mark{display:block;width:44px;height:auto;aspect-ratio:86/55;flex-shrink:0;filter:brightness(0) invert(1);object-fit:contain}
.header-actions{flex-shrink:0}
.studio{height:calc(100dvh - var(--header-height));min-height:0;grid-template-columns:248px minmax(0,1fr) 272px;overflow:hidden}
.panel{min-height:0;overscroll-behavior:contain}
.work-area{min-height:0;display:grid;grid-template-rows:52px minmax(0,1fr) 40px 80px 36px;padding:0 var(--space-5);overflow:hidden}
.canvas-toolbar{min-height:0}
.stage-wrap{min-height:0;min-width:0;container-type:size;overflow:hidden}
.artboard{width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:100%;max-height:100%;aspect-ratio:1}
.canvas-meta{align-items:center;min-width:0;padding:0;white-space:nowrap}
.transport{padding:var(--space-3) 0;min-width:0}
.workspace-note{padding:0 0 var(--space-3);align-items:center;white-space:nowrap}
.compact-controls{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--color-surface);border-left:1px solid var(--color-border);overflow:hidden}
.compact-tabs{display:flex;flex-shrink:0;gap:var(--space-2);padding:0 var(--space-4);border-bottom:1px solid var(--color-border);height:52px}
.compact-tabs button{flex:1;border-bottom:2px solid transparent;color:var(--color-muted);font-size:var(--text-sm)}
.compact-tabs button[aria-selected=true]{color:var(--color-white);border-bottom-color:var(--color-white)}
.compact-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#666 transparent}
.compact-pane{min-width:0}
.compact-pane section{padding:var(--space-5);border-bottom:1px solid var(--color-border)}
.compact-pane .field{margin-top:var(--space-3)}
.compact-pane .section-heading{margin-bottom:var(--space-3)}
.compact-pane textarea{min-height:76px;max-height:200px}
.compact-pane input[type=range]{height:36px}
.compact-pane .motion-list{gap:var(--space-2)}
.compact-pane .motion-choice{min-height:64px}
.compact-pane .shape-choice{min-height:76px}
.compact-pane input[type=number]{min-height:36px}
.compact-pane .panel-foot,.compact-pane .inspector-bottom{padding:var(--space-5)}
.compact-pane .control{margin-bottom:var(--space-3)}
.compact-pane .switch-row label{flex:1;padding:var(--space-3) 0}
.compact-pane #geometry-panel section:first-child{padding-top:var(--space-4)}
@media(min-width:1500px){.studio{grid-template-columns:280px minmax(0,1fr) 296px}.work-area{padding:0 var(--space-8)}.panel section{padding:var(--space-6)}}
@media(max-width:1200px){.tagline{display:none}.workspace-note>span:first-child{font-size:var(--text-xs)}}
@media(max-width:1100px){
  :root{--header-height:64px}
  .topbar{padding:0 var(--space-5)}
  .studio{grid-template-columns:minmax(0,1fr) 320px}
  .work-area{grid-template-rows:48px minmax(0,1fr) 36px 76px 28px;padding:0 var(--space-4)}
  .workspace-note>span:first-child{display:none}
  .compact-pane input[type=range]{height:44px}
  .compact-pane input[type=number]{min-height:44px}
  .canvas-meta{font-size:var(--text-xs)}
}
@media(max-width:700px){
  .topbar{padding:0 var(--space-3);gap:var(--space-2)}
  .identity{gap:var(--space-2)}
  .identity h1{font-size:1.25rem}
  .internauts-mark{width:36px}
  .header-actions{gap:0}
  .quiet{min-width:44px;padding:var(--space-2)}
  .header-actions .primary{padding:var(--space-2) var(--space-3);gap:var(--space-2)}
  .studio{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(288px,52%) minmax(0,1fr)}
  .work-area{grid-template-rows:40px minmax(0,1fr) 28px 60px;padding:0 var(--space-3)}
  .canvas-toolbar button{padding:0 var(--space-2);min-height:40px}
  .canvas-meta{gap:var(--space-1)}
  .canvas-meta>span:first-child{font-size:var(--text-xs)}
  .canvas-meta .mono{font-size:var(--text-xs);letter-spacing:0}
  .transport{gap:var(--space-2);padding:var(--space-2) 0}
  .transport .restart{min-width:40px}
  .loop-label,.workspace-note{display:none}
  .compact-controls{border-left:0;border-top:1px solid var(--color-border)}
  .compact-tabs{height:48px}
  .compact-pane section{padding:var(--space-4)}
  .shape-grid{grid-template-columns:repeat(3,1fr)}
  .compact-pane .shape-choice{height:72px;min-height:72px}
  .compact-pane .motion-list{display:grid;grid-template-columns:1fr 1fr}
  .compact-pane .motion-choice{padding:var(--space-3)}
  .compact-pane .panel-foot{padding:var(--space-4)}
  dialog{padding:var(--space-5);max-height:calc(100dvh - 24px)}
  .export-option{padding:var(--space-3)}
}
@media(max-width:359px){
  .identity h1{font-size:1.125rem}
  .internauts-mark{width:28px}
  .header-actions .primary{font-size:var(--text-xs);padding:var(--space-2);gap:var(--space-1)}
  .canvas-meta>span:first-child{display:none}
  .canvas-meta{justify-content:flex-end}
}
@media(max-width:1100px) and (min-width:560px) and (max-height:540px){
  :root{--header-height:56px}
  .studio{grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:minmax(0,1fr)}
  .work-area{grid-template-rows:40px minmax(0,1fr) 24px 60px;padding:0 var(--space-3)}
  .workspace-note,.loop-label{display:none}
  .canvas-meta>span:first-child{display:none}
  .canvas-meta{justify-content:flex-end}
  .compact-controls{border-top:0;border-left:1px solid var(--color-border)}
  .compact-tabs{height:44px}
  .compact-pane .motion-list{display:flex}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(pointer:coarse){input[type=range]{height:44px}input[type=number]{min-height:44px}.switch-row label{flex:1;padding:var(--space-3) 0}}
.shape-choice .dimension{font-size:var(--text-xs);line-height:1;color:inherit;opacity:.8}
.shape-choice{height:88px;gap:var(--space-1)}
.shape-choice svg{height:24px;width:24px}
.form-hint{font-size:var(--text-xs);line-height:1.5;color:var(--color-muted);margin-top:var(--space-3)}
#surface3d{display:block;width:100%;height:100%}
.webgl-error{position:absolute;inset:0;background:var(--color-black);padding:var(--space-6);display:grid;place-items:center;text-align:center;color:var(--color-text);font-size:var(--text-sm)}
.web-export{grid-column:1/-1}
.control input:disabled{opacity:.4;cursor:not-allowed}
.canvas-toolbar>div{display:flex;align-items:center}
.canvas-toolbar button{padding:var(--space-2)}
.canvas-toolbar #form-name{font-size:var(--text-xs);letter-spacing:0}
#drag-mode[aria-pressed=true]{text-decoration:none;border-bottom:1px solid #aaa}
@media(max-width:359px){.canvas-toolbar{gap:var(--space-1)}.canvas-toolbar button{padding:var(--space-1)}.canvas-toolbar #form-name{font-size:var(--text-xs)}}
.transport-extra{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
#refresh-visual{min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);line-height:1.25;max-width:108px}
@media(max-width:1100px){.transport-extra{gap:var(--space-2)}.transport-extra .loop-label{display:none}#refresh-visual{width:64px;padding:var(--space-1) var(--space-2)}}
.save-explanation{font-size:var(--text-sm);color:var(--color-text);line-height:1.6}
.saved-file{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) 0;margin:var(--space-3) 0;overflow-wrap:anywhere}
.download-project{min-height:48px;text-decoration:none;width:100%}
#save-status{margin-top:var(--space-3)}
.save-note{margin-top:var(--space-5);line-height:1.5}