/* Night sky, lavender and mint, inspired by Color Hunt's F0F3FF / 15F5BA / 836FFF / 211951 palette. */
:root{color-scheme:dark;--purple:#8974ff;--purple-dark:#715de1;--muted:#9fa8c5;--line:#a8b1e21c;--canvas:#10121f;--focus:#8ee8d0;color:#e8ecff;background:#0d1224}
body{background:radial-gradient(ellipse at 8% 0,#836fff16,transparent 46%),radial-gradient(ellipse at 95% 90%,#15f5ba09,transparent 45%),#0d1224;background-attachment:fixed}
.app-header{background:#10162be6;border-color:var(--line)}.brand strong{color:#f1f3ff}.brand small{color:#94a0c3}.brand-mark{filter:drop-shadow(0 0 9px #836fff2b)}.view-switch{background:#080d1db3;border:1px solid #a8b1e21b}.view-switch button{color:#a5aecb}.view-switch button[aria-pressed=true]{background:linear-gradient(130deg,#524180,#383459);color:#f5f3ff;box-shadow:0 3px 12px #0002}.quiet-btn,.icon-btn{color:#a7b0cf}.quiet-btn:hover,.icon-btn:hover{background:#a8b1e212;color:#eef2ff}.primary-btn{background:linear-gradient(135deg,#8874fa,#6c5bdd);border-color:#a08eff61;box-shadow:0 4px 14px #6a50d323}.primary-btn:hover{background:linear-gradient(135deg,#9a86ff,#7f6be8)}.outline-btn{color:#c8ccef;background:#a8b1e208;border-color:#a8b1e22e}.outline-btn:hover{background:#a8b1e21a}
.controls{background:linear-gradient(160deg,#18203aeb,#131b2fec);border-color:var(--line)}.panel-heading .eyebrow,.panel-heading p{color:#92a0c0}.panel-heading h1{color:#f0f3ff}.eyebrow{color:#ab9cff}.control-section h2{color:#c5cdec}.control-section h2>span{color:#6c799b}.symmetry-options button{background:#0e1629b3;border-color:#929bca26;color:#7f8fae}.symmetry-options button[aria-pressed=true]{background:linear-gradient(140deg,#3a315a,#263b4d);border-color:#9e8df396;color:#bcacff;box-shadow:inset 0 0 16px #b5a5ff05}.symmetry-options small{color:#98a3c2}.axis-options,.brush-options{background:#0a1122b3;border:1px solid #a8b1e212}.axis-options button,.brush-options button{color:#94a0bd}.axis-options button[aria-pressed=true],.brush-options button[aria-pressed=true]{background:#3c365e;color:#e0d8ff}.mode-note{color:#92a0c2}.drawing-tools button{color:#99a8c7}.drawing-tools button[aria-pressed=true],.drawing-tools button:hover{background:#8b73ff23;color:#b9a8ff}.range-label,.color-label{color:#a8b4d1}.range-label output{color:#b8aaff}input[type=range]{accent-color:#9d8aff}.custom-color{border-color:#a6aed940;color:#aeb9d5}.palette button{border-color:#172037}.switch-label{color:#a9b3d1}.switch-label i{background:#39435e}.switch-label input:checked+i{background:#8974e8}.panel-foot{color:#8093b2}.panel-foot .save-dot{background:#71d2b8}.document-name input{color:#d9dff2}.document-name span{color:#8e9dbe;border-color:#a8b1e224}.divider{background:#a8b1e22b}.canvas-shell{border:1px solid #7b83ae2b;box-shadow:0 12px 38px #02040c35,0 0 26px #836fff06;border-radius:20px}.canvas-badge{background:#242d49c2;border-color:#aeb9ea20;color:#c9c5e6}.canvas-bottomline{color:#8c95b2}.canvas-corner{color:#6f799b}.canvas-action{color:#a4afca}.canvas-invitation>span{color:#c6b6f2}.canvas-invitation p{color:#9694b5}.canvas-empty strong{color:#c8c1e3}.canvas-empty span{color:#939bb6}.workspace-footer{color:#7788ab}.workspace-footer button{color:#a0afd2}.explore-strip{background:linear-gradient(110deg,#25243fee,#1b303bea);border:1px solid #a8b1e21c}.concept-icon{color:#9ea7d1;border-color:#a8b1e233}.concept-copy strong{color:#c6cdeb}.concept-copy span{color:#99a8c6}.legal-footer{background:#0a1020b3;color:#8493b6;border-color:var(--line)}.legal-footer a,.legal-footer button{color:#a3acd0}.toast{background:#29233f;color:#f4efff;border-color:#9c8ad33b}
.geometry-controls{margin-top:12px}.geometry-buttons{display:flex;gap:6px}.geometry-buttons button{background:#a8b1e209;border:1px solid #a8b1e22a;color:#bcc5e2;border-radius:7px;padding:7px 8px;font-size:10px;min-height:32px}.geometry-buttons button:first-child{flex:1}.geometry-buttons button[aria-pressed=true]{border-color:#83e8d887;background:#15f5ba13;color:#9cedd6}.geometry-controls .range-label{margin-top:10px}.geometry-controls>p{font-size:9px;line-height:1.65;color:#889abb;margin:8px 0 0}.canvas-shell.positioning #drawing-canvas{cursor:move}.mobile-toolbar button,.mobile-toolbar select{color:#bdc6e6;border-color:#a8b1e237;background:#172039}.mobile-toolbar button[aria-pressed=true]{color:#d9d0ff;background:#473e70;border-color:#9e8ae58a}
.learn .canvas-shell{--canvas:#f3f7ff;border-color:#c1cae2}.learn .explore-strip{background:#24374d;border-color:#49627c55}.learn .concept-copy strong{color:#d0dbef}.learn .concept-copy span{color:#a2b8d1}.learn .canvas-bottomline{color:#667899}.learn .canvas-action{color:#64789a}.learn .canvas-badge{background:#e6ecfacc;border-color:#c1cce0;color:#64759c}.learn .canvas-empty{background:radial-gradient(ellipse,#f3f7ffee,transparent 75%)}.learn .canvas-empty strong{color:#71629b}.learn .canvas-empty span{color:#7d8da9}.challenge-strip{background:#282944;border-color:#645783}.challenge-strip strong{color:#c5b6ed}.challenge-strip p{color:#a7a6c7}.challenge-strip.success{background:#203b38;border-color:#4d8877}.challenge-strip.success p{color:#9fe2c6}
/* Dialogs use an airy ice-blue surface against the darker studio. */
dialog{color-scheme:light;background:linear-gradient(140deg,#f5f7ff,#edf2fd);color:#28324d;border-color:#dbe3fa;box-shadow:0 24px 100px #03071a70}dialog::backdrop{background:#030816a6;backdrop-filter:blur(8px)}dialog .eyebrow{color:#6f5fc4}dialog .dialog-heading h2{color:#293152}dialog .dialog-heading p,dialog .dialog-note{color:#63718f}dialog .icon-btn{color:#69799a}dialog .icon-btn:hover{background:#e0e6f5}dialog .outline-btn{color:#6456a6;background:#ffffff90;border-color:#cdd5ed}dialog .outline-btn:hover{background:#e6e8fa}dialog .primary-btn{color:white}dialog label,dialog .export-options>label:not(.check-label),dialog .check-label{color:#63718d}dialog select,dialog .share-actions textarea{border-color:#cfd8eb;color:#47597d;background:#fff}dialog .share-actions p,dialog .export-options p,.viewer-footer p{color:#657692}.gallery-card strong{color:#485775}.gallery-card span{color:#7b89a5}.challenge-choices button{background:#e9ecfc;border-color:#d2d7ee}.challenge-choices button:hover{background:#e0e5fc}.help-list strong{color:#4f5887}.help-list p{color:#66738c}.shortcut-row{color:#677593;border-color:#d8e0ef}kbd{background:#e4eaf8}.replay-controls output{color:#657492}
.share-preview-wrap{display:flex;flex-direction:column;gap:14px;min-width:0;align-items:center}.share-preview-wrap canvas{width:100%;height:auto;border-radius:13px;background:#10121f}.share-preview-wrap>button{width:100%;font-size:11px}.share-link-tag{font-size:11px;color:#6555b0;background:#e5defb;align-self:flex-start;border-radius:30px;padding:6px 10px}.share-actions>label{margin-top:0}.share-actions textarea{font-size:10px;line-height:1.7}.share-divider{font-size:10px;color:#7c8baa;display:flex;align-items:center;gap:8px;margin:6px 0 0}.share-divider:before,.share-divider:after{content:'';height:1px;background:#d9e0ed;flex:1}.legal-dialog{max-width:820px}.legal-dialog>.dialog-heading{position:sticky;top:-28px;z-index:1;background:#f3f6ff;padding-top:12px;padding-bottom:8px}.legal-dialog .legal-document{padding:0;color:#546583}.legal-dialog .legal-document section{margin:24px 0}.legal-document h2{color:#5c548f}.legal-summary{background:#e5e8fa;border-color:#cfd7f1}.legal-document a,.legal-page-footer a{color:#6e54bf}.legal-document code{background:#e5e9f7}.legal-document th{background:#e3e8f8}.legal-document th,.legal-document td{border-color:#d9e1f1}.legal-table-wrap{border-color:#ccd7ed}.legal-page{color-scheme:light;background:linear-gradient(150deg,#f0f3ff,#eaf4f7);color:#52627f}.legal-header{border-color:#d7dff1}.legal-brand{color:#6f5bbb}.legal-intro{color:#6e7d9a}.legal-date{color:#7e8da8}.legal-page-footer{color:#7a8ba8;border-color:#d7dff1}.legal-page .outline-btn{color:#6556a5;background:#ffffff9c;border-color:#cbd5eb}
/* A persistent home screen with two live symmetry studies. */
.welcome-scene{pointer-events:auto;display:block;position:fixed;inset:0;z-index:30;overflow:auto;background:radial-gradient(ellipse at 18% 30%,#5437832e,transparent 48%),radial-gradient(ellipse at 83% 67%,#15f5ba10,transparent 43%),linear-gradient(145deg,#10132b,#0a1020 65%,#11172a);color:#f0f3ff;transition:none;transform:none;opacity:1}.at-home{overflow:hidden}.home-inner{position:relative;max-width:1120px;min-height:100dvh;margin:0 auto;padding:27px 30px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center}.home-top{display:flex;justify-content:space-between;align-items:center;width:100%;position:absolute;left:0;top:0;padding:25px 30px}.home-wordmark{font-size:11px;letter-spacing:3px;color:#c8c4ea}.home-top-note{font-size:10px;letter-spacing:1px;color:#808cad}.home-copy{text-align:center;margin-top:43px}.home-copy>.eyebrow{font-size:9px;letter-spacing:3px;color:#a59aca}.home-copy h1{font-size:48px;letter-spacing:-2.5px;line-height:1.25;font-weight:600;margin:16px 0 12px;background:linear-gradient(110deg,#f0f3ff 25%,#c5b7ff 66%,#adf5e1);-webkit-background-clip:text;background-clip:text;color:transparent}.home-copy p{font-size:13px;line-height:1.9;letter-spacing:.3px;color:#9ea8c7;margin:0}.home-art-board{position:relative;width:min(100%,960px);margin:6px auto 18px;display:flex;justify-content:center;align-items:center;min-height:0}.home-art-board #welcome-art{width:100%;height:auto;aspect-ratio:960/430;margin:0;max-height:40dvh;object-fit:contain}.home-art-labels{position:absolute;bottom:8px;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;text-align:center;pointer-events:none}.home-art-labels>span{color:#c3b5ed;font-size:11px;letter-spacing:1px}.home-art-labels i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#bca5ff;vertical-align:middle;margin-right:6px;box-shadow:0 0 9px #ae9afc}.home-art-labels>span:last-child{color:#a8dfd1}.home-art-labels>span:last-child i{background:#83e8d8;box-shadow:0 0 9px #83e8d8}.home-art-labels small{display:block;font-size:9px;letter-spacing:.4px;margin-top:6px;color:#6f819f}.home-start{position:relative;display:flex;gap:38px;align-items:center;justify-content:center;color:#f5f3ff;font-size:14px;font-weight:600;letter-spacing:.2px;border:1px solid #bfadff63;background:linear-gradient(125deg,#8e70ee,#6958cf 64%,#42687b);box-shadow:0 5px 35px #836fff30,inset 0 1px 0 #ffffff30;border-radius:14px;padding:17px 26px;min-width:220px;transition:transform .2s,box-shadow .2s}.home-start:hover{box-shadow:0 7px 45px #836fff52;transform:translateY(-2px)}.home-start>span{font-size:21px;color:#d6e8f3}.home-note{font-size:10px;color:#7e8ca8;margin:17px 0 24px}.home-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;font-size:9px;color:#586a8c}.home-legal a{color:#8e9abd;text-decoration:none}.home-legal a:hover{color:#c6cfed}.home-legal>span:last-child{margin-left:8px}.home-aurora{position:absolute;left:50%;top:45%;width:75vw;max-width:1100px;aspect-ratio:2;border:1px solid #9a8ad909;border-radius:50%;transform:translate(-50%,-50%) rotate(-15deg);box-shadow:0 0 140px #836fff07}.home-aurora:after{content:'';position:absolute;inset:24px;border:1px solid #15f5ba06;border-radius:50%}
@media(max-width:800px){.controls{border-top-color:var(--line)}.header-actions #share-open span{display:inline}.header-actions #share-open{padding:9px;gap:5px;font-size:11px}.geometry-controls>p{font-size:10px}.geometry-buttons button{min-height:36px;font-size:11px}.home-top-note{display:none}.home-copy h1{font-size:42px}.home-art-board{margin-top:0}}
@media(max-width:580px){.home-inner{padding:22px 20px;justify-content:flex-start}.home-top{position:relative;padding:0;margin:0 0 24px}.home-wordmark{font-size:9px;letter-spacing:2px}.home-copy{margin-top:0}.home-copy h1{font-size:36px;margin:14px 0 12px}.home-copy p{font-size:11px}.home-copy>.eyebrow{font-size:7px;letter-spacing:2px}.home-art-board #welcome-art{width:min(100%,420px);aspect-ratio:520/540;max-height:44dvh}.home-art-board{margin:0 auto 6px}.home-art-labels{display:none}.home-start{padding:15px 24px;font-size:13px;min-width:215px}.home-note{font-size:9px;margin:16px 0 22px}.home-legal{font-size:8px;gap:8px 12px}.home-legal>span:last-child{margin-left:0}.share-content{grid-template-columns:1fr}.share-preview-wrap canvas{max-width:280px}.share-preview-wrap>button{max-width:280px}.share-actions>label{margin:0}.geometry-buttons{gap:4px}.geometry-buttons button{font-size:9px;padding:6px 5px}.geometry-controls .range-label{font-size:10px}.geometry-controls>p{font-size:9px}.legal-dialog>.dialog-heading{top:-22px}.brand small{font-size:7px;letter-spacing:1.4px}.header-actions .gallery-open{display:none}.header-actions #share-open span{display:inline}.header-actions #share-open{font-size:10px}.learn .explore-strip .outline-btn{color:#ccd5eb}.app-header{gap:10px}}
@media(max-height:670px) and (min-width:581px){.home-copy{margin-top:24px}.home-copy h1{font-size:38px;margin:10px 0}.home-copy p{font-size:11px}.home-art-board #welcome-art{max-height:34dvh}.home-art-board{margin-bottom:10px}.home-start{padding:12px 24px}.home-note{margin:12px 0 17px}.home-top{padding-top:18px}}
@media(prefers-reduced-motion:reduce){.welcome-scene:not([hidden]){display:block!important}.home-start{transition:none}}

.welcome-scene[hidden]{display:none!important}

@media(max-width:480px){.mobile-toolbar{gap:7px}.mobile-toolbar #mobile-position{font-size:10px;padding:7px 9px}.mobile-toolbar>div{gap:4px}.mobile-toolbar>div button{padding:7px 12px}}

.geometry-controls #axis-draw{width:100%;margin-top:7px;min-height:36px;padding:8px;border:1px solid #86ded842;border-radius:8px;background:#1f3c4440;color:#aeeadb;font-size:11px}.geometry-controls #axis-draw[aria-pressed=true]{background:#15f5ba1c;border-color:#8ff2d9}.geometry-controls #axis-draw[hidden]{display:none}.canvas-shell.drawing-axis #drawing-canvas{cursor:crosshair}
.viewer-dialog{width:min(1100px,calc(100vw - 32px))}.viewer-stage{width:100%;height:clamp(180px,50dvh,520px);padding:12px;background:#10121f;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}.viewer-dialog .viewer-stage #viewer-canvas{width:100%;height:100%;max-width:none;object-fit:contain;border-radius:0;margin:0}.viewer-display-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:#6b7897;font-size:11px}.viewer-display-options button{font-size:10px;min-height:32px;padding:7px 11px}.viewer-dialog.viewer-expanded{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:auto}.viewer-dialog.viewer-expanded .viewer-stage{flex:1;min-height:100px;height:auto}.viewer-dialog.viewer-expanded .dialog-heading{margin-bottom:12px}.viewer-dialog.viewer-expanded .replay-controls,.viewer-dialog.viewer-expanded .viewer-footer{flex-shrink:0}.share-preview-wrap canvas{max-height:360px;object-fit:contain}.share-capacity{display:flex;flex-direction:column;gap:5px}.share-capacity[hidden]{display:none}.share-capacity progress{width:100%;height:6px;border:0;border-radius:8px;overflow:hidden;accent-color:#8974ff}.share-actions .share-capacity p{font-size:10px;color:#6e609d}.share-storage-info{margin-top:20px;font-size:11px;line-height:1.85;color:#64718e;border:1px solid #d6dded;border-radius:10px;padding:11px 14px}.share-storage-info summary{cursor:pointer;color:#625598;font-weight:600}.share-storage-info p{margin:10px 0 0}
@media(max-width:580px){.viewer-dialog{padding:20px 16px}.viewer-stage{height:clamp(180px,43dvh,430px);padding:8px}.viewer-display-options{font-size:9px}.viewer-display-options button{font-size:9px;padding:6px 9px}.geometry-controls #axis-draw{font-size:10px;min-height:32px}}