/* Lucian UX/UI Prompt #032 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#032 */

.u032-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:196px;border:0;padding:0;border-radius:26px;background:var(--ux-surface);color:var(--ux-ink);cursor:pointer;
  transition:transform .5s var(--ux-spring),background-color .3s var(--ux-ease)}

.u032-zone:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}

.u032-zone svg.u032-dash{position:absolute;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);overflow:visible;pointer-events:none}

.u032-dash rect{fill:none;stroke:var(--ux-line-2);stroke-width:2;stroke-dasharray:8 7;transition:stroke .3s var(--ux-ease)}

.u032-zone:hover .u032-dash rect,.u032.is-over .u032-dash rect{stroke:var(--ux-accent);animation:u032-march .9s linear infinite}

.u032.is-over .u032-zone{transform:scale(1.03);background:color-mix(in srgb,var(--ux-accent) 7%,var(--ux-surface))}

.u032-zone:hover .u032-orb{transform:translateY(-4px)}

.u032-zone b{margin-top:14px;font-size:15.5px;font-weight:720;letter-spacing:-.02em}

.u032-zone b em{font-style:normal;color:var(--ux-accent)}

.u032-zone small{margin-top:4px;font-size:12.5px;color:var(--ux-ink-3)}
/* Lucian UX/UI Prompt #042 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#042 */

.u042-steps{position:relative;display:flex;justify-content:space-between;margin:0 6px;padding:0;list-style:none}

.u042-line{position:absolute;left:17px;right:17px;top:16px;height:3px;border-radius:2px;background:var(--ux-surface-3)}

.u042-line i{position:absolute;inset:0;border-radius:inherit;background:var(--ux-grad);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .6s var(--ux-ease)}

.u042-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:34px}

.u042-dot{position:relative;width:34px;height:34px;border:0;padding:0;border-radius:50%;background:var(--ux-surface);box-shadow:inset 0 0 0 2px var(--ux-line-2);font-size:13.5px;font-weight:780;color:var(--ux-ink-3);display:grid;place-items:center;transition:box-shadow .35s,background-color .35s,color .35s,transform .45s var(--ux-spring)}

.u042-dot:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}

.u042-dot svg{position:absolute;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}

.u042-dot path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ux-ease) .1s}

.u042-st.cur .u042-dot{box-shadow:inset 0 0 0 2px var(--ux-accent),0 0 0 5px var(--ux-accent-soft);color:var(--ux-accent);transform:scale(1.08)}

.u042-st.done .u042-dot{background:var(--ux-accent);box-shadow:none;color:var(--ux-accent-ink);cursor:pointer}

.u042-st.done .u042-dot span{opacity:0}

.u042-st.done .u042-dot svg{opacity:1}

.u042-st.done .u042-dot path{stroke-dashoffset:0}

.u042-st small{font-size:11.5px;font-weight:700;color:var(--ux-ink-3);white-space:nowrap;transition:color .3s}

.u042-st.cur small,.u042-st.done small{color:var(--ux-ink)}
/* Lucian UX/UI Prompt #070 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#070 */

.u070-tx{flex:1;min-width:0}

.u070-tx b{display:block;font-size:14px;font-weight:780;letter-spacing:-.02em}

.u070-tx small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--ux-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.u070-x{width:30px;height:30px;flex:none;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--ux-ink-3)}

.u070-x:hover{background:var(--ux-surface-2);color:var(--ux-ink)}

.u070-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.u070-act:focus-visible,.u070-x:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
/* Lucian UX/UI Prompt #101 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#101 */
.u101 button{font:inherit;color:inherit;cursor:pointer}
.u101 .panes{display:grid;grid-template-columns:minmax(0,var(--split,42%)) 24px minmax(0,1fr);height:230px}
.u101 .doc{padding:27px 15px;background:var(--ux-surface-2);overflow:hidden}
.u101 .sep{padding:0;border:0;background:var(--ux-surface-3);cursor:col-resize;touch-action:none;color:var(--ux-ink-2);font-size:24px}
.u101 .preview{padding:25px 16px}
.u070-t{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 12px 12px 14px;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 16px 30px -18px var(--ux-shadow-strong);transform-origin:50% 100%;transform:translate(var(--dx,0px),var(--y,0px)) scale(var(--s,1));opacity:var(--o,1);transition:transform .5s var(--ux-spring),opacity .35s;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* Reviewed workspace adaptations: original demo content omitted; existing light theme and no entrance motion retained. */
.ux{--ux-surface:var(--paper);--ux-surface-2:var(--gray-50);--ux-surface-3:var(--line);--ux-line:var(--line);--ux-line-2:var(--line);--ux-ink:var(--ink);--ux-ink-2:var(--muted);--ux-ink-3:var(--muted);--ux-accent:var(--accent);--ux-accent-ink:#fff;--ux-accent-soft:var(--nav-active);--ux-grad:var(--accent);--ux-ease:cubic-bezier(.2,.8,.2,1);--ux-spring:cubic-bezier(.2,.8,.2,1);--ux-shadow-strong:#0003;font-family:inherit}
.ux *, .ux *::before,.ux *::after{box-sizing:border-box}
.u042-steps{max-width:600px;margin:0 auto 20px}.u042-st{width:auto;min-width:64px}.u042-line{top:16px}.u042-dot{min-height:34px}.u042-st small{font-size:12px}
#current-errors{margin:8px 0 0;padding-left:20px;color:var(--error);font-size:13px}#current-errors:empty{display:none}
#input-checks{margin-top:8px}#input-checks summary{font-size:12px;color:var(--muted)}
.u032-zone{width:100%;min-height:160px;height:auto;border-radius:var(--radius-panel);font:inherit;text-align:center;padding:24px;color:var(--muted);border:1px dashed var(--line);background:var(--gray-50)}
.u032-zone.drag{outline:2px solid var(--accent);background:var(--nav-active)}.u032-zone:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#frame-frequency_responses[hidden]{display:none!important}.frequency-editor .panes{grid-template-columns:minmax(0,var(--split,65%)) 24px minmax(0,1fr);height:auto;min-height:400px}
.frequency-editor.u101{max-width:none;font-size:14px}.frequency-editor .doc{padding:12px;overflow:visible;min-width:0}.frequency-editor .preview{padding:12px;min-width:0;max-height:800px;overflow:auto}
.frequency-editor .sep{min-height:44px;font-size:18px}.frequency-editor canvas{border:0}.marker-controls{grid-template-columns:1fr 1fr}.marker-controls button{grid-column:1/-1}.marker-list{gap:12px}
.marker-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-bottom:12px}.marker-row strong{grid-column:1/-1;font-size:13px}.marker-row>label{min-width:0}.marker-row>button{font-size:12px}.marker-row .marker-position{grid-column:1/-1}.marker-position summary{font-size:12px;color:var(--muted);cursor:pointer}.marker-position>div{display:flex;gap:8px;flex-wrap:wrap;padding:10px 0}.marker-position label{flex:1;min-width:80px}.marker-position input{width:100%}.marker-row [data-marker-remove]{justify-self:end}
#ui-toast{position:fixed;right:24px;bottom:24px;width:min(380px,calc(100vw - 32px));z-index:20}.u070-t{position:relative;min-height:68px;bottom:auto}.u070-tx b{font-weight:500;font-size:14px}.u070-x{min-height:44px;min-width:44px}.u070-tx b{white-space:pre-line}
.ux *{animation:none!important;transition:none!important}
@media(max-width:900px){.frequency-editor .panes{grid-template-columns:minmax(0,1fr);min-height:0}.frequency-editor .sep{display:none}.frequency-editor .preview{max-height:none}.marker-controls{grid-template-columns:1fr 1fr}.u042-st small{font-size:11px}.u042-steps{margin-bottom:16px}.u042-dot{min-width:44px;min-height:44px}.u042-line{top:21px}.u032-zone{min-height:140px}.frequency-editor .doc,.frequency-editor .preview{padding:10px}#ui-toast{right:16px;bottom:16px}}
