/* TAILO: a quiet paper studio in lilac, sage and warm white. */
:root {
  --ink:#48474b; --green:#697e69; --orange:#9780a4; --paper:#f6f3ee;
  --line:#e4e0d9; --muted:#85827f; --lilac:#79678b; --lilac-soft:#ece5ef;
  --sage:#e2e8db; --surface:#fffdf8; --mobile-board-height:clamp(275px,50dvh,475px);
}
html,body {height:100%;}
body {display:flex;flex-direction:column;height:100dvh;min-height:620px;overflow:hidden;background:var(--paper);color:var(--ink);}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:2px solid #917aab;outline-offset:3px;}
button {transition:background .18s,border-color .18s,transform .18s;}
.button {border-radius:12px;font-weight:500;}
.button.primary,.header-actions .primary {background:var(--lilac);color:#fffdfb;box-shadow:none;}
.button.primary:hover,.header-actions .primary:hover {background:#685777;}
.button.secondary,.empty-state .button {background:#e5eadc;color:#52644e;border-radius:12px;}
.button.secondary:hover {background:#d9e1ce;}
.button.outline {background:var(--surface);border-color:var(--line);color:#6b686d;}
.button.danger {background:#aa766f;color:white;}
.text-button {color:#806b8b;}
.app-header {height:70px;min-height:70px;padding:0 28px;gap:20px;background:var(--paper);border-bottom:1px solid #e5e0da;}
.brand {gap:17px;}
.brand-mark {font-size:45px;color:#746083;letter-spacing:-4px;}
.brand-spark {font-size:22px;color:#859373;margin-top:3px;}
.brand-cn {border-color:#d9d2da;color:#59515e;font-size:13px;letter-spacing:2px;}
.brand-cn small {color:#8a858d;font-size:6px;letter-spacing:1px;}
.top-nav {gap:18px;}
.top-nav .current {background:none;border:0;border-radius:0;padding:8px 0;color:#695a76;position:relative;}
.top-nav .current:after {content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#aa97b9;border-radius:3px;}
.top-nav button {color:#8b858a;padding:8px 0;}
.header-actions {gap:9px;}
.header-actions .button {border-radius:11px;padding:10px 15px;font-size:12px;}
.header-actions .quiet {background:#eae5ed;color:#796786;}
.save-state {color:#7d8176;font-size:10px;}
.save-state i {background:#93a18a;}
.intro-bar {height:130px;min-height:130px;padding:0 34px;gap:24px;background:none;overflow:hidden;}
.intro-copy .eyebrow {font-size:8px;letter-spacing:2px;color:#91849a;}
.intro-bar h1 {font-size:30px;font-weight:600;letter-spacing:1px;line-height:1.55;margin:5px 0 0;color:#4e4951;}
.intro-bar h1 em {color:#82708e;font-style:normal;}
.intro-copy p {font-size:11px;letter-spacing:.6px;color:#89857e;margin-top:6px;}
.intro-collage {width:184px;height:112px;transform:rotate(-2deg);}
.intro-collage:before {content:'';position:absolute;left:5px;top:15px;width:84px;height:89px;background:#e2e7d9;border-radius:46px 46px 12px 12px;}
.intro-collage:after {content:'';position:absolute;left:105px;top:16px;width:59px;height:76px;background:#e6dfeb;border:1px solid #d8cedf;border-radius:5px;transform:rotate(10deg);}
.intro-collage img {z-index:1;}
.intro-collage img:first-child {width:84px;left:5px;top:18px;transform:rotate(-5deg);}
.intro-collage img:nth-child(2) {width:68px;right:17px;top:14px;transform:rotate(10deg);}
.intro-collage span {display:block;font-family:'Tailo Round',sans-serif;font-size:9px;letter-spacing:.6px;right:10px;top:90px;line-height:1.2;transform:none;color:#93899b;}
.intro-collage span br {display:none;}
.spec-pill {border:0;border-left:1px solid #dcd5de;padding:5px 0 5px 23px;border-radius:0;background:none;box-shadow:none;transform:none;color:#807e75;font-size:10px;gap:14px;}
.spec-pill b {color:#69605f;font-size:17px;margin:1px 0;letter-spacing:1px;font-weight:500;}
.spec-pill small {color:#8f8b82;font-size:9px;}
.spec-square {width:28px;height:28px;border-color:#b4bba9;background:#fffefb;box-shadow:3px 3px 0 #dedbcc;border-radius:5px;}
.workspace {flex:1;height:auto;min-height:0;margin:0 20px 20px;display:grid;grid-template-columns:62px 308px minmax(300px,1fr) 224px;gap:12px;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden;}
.tool-rail {padding:12px 5px;gap:7px;background:#e7e9df;border:1px solid #dde0d4;border-radius:18px;}
.rail-button {width:50px;height:59px;gap:6px;border-radius:12px;font-size:10px;}
.rail-button,.rail-button:not(.active) {background:transparent;color:#798274;box-shadow:none;}
.rail-button .icon {width:21px;height:21px;stroke-width:1.6;}
.rail-button.active {background:#f9f6fa;color:#7b668b;box-shadow:0 2px 4px #5f4d7108;}
.rail-button:not(.active):hover,.rail-bottom .rail-button:hover {background:#f3f3eb;color:#69755f;}
.library {background:var(--surface);border:1px solid var(--line);border-radius:18px;}
.library #library-content {padding:23px 18px;scrollbar-color:#d8d2d8 transparent;}
.library h2 {font-size:21px;font-weight:600;letter-spacing:.4px;color:#57505e;margin-top:7px;}
.panel-title-row {gap:6px;align-items:center;}
.panel-title-row .eyebrow {font-size:7px;letter-spacing:1.1px;color:#968b9b;}
.panel-title-row .small-tag {transform:none;padding:6px 7px;max-width:62px;background:#f0ecf2;color:#85728f;border-radius:7px;font-size:8px;line-height:1.6;}
.panel-description {font-size:11px;color:#928a86;line-height:1.9;margin-bottom:16px;}
.upload-card {display:flex;align-items:center;width:100%;gap:10px;text-align:left;background:#eee8f1;border:1px solid #e0d6e7;border-radius:13px;color:#7c648c;padding:14px 12px;margin:14px 0 15px;}
.upload-card>.icon {width:23px;height:23px;flex:none;}
.upload-card>span:nth-child(2) {flex:1;min-width:0;}
.upload-card b {display:block;font-size:12px;font-weight:600;line-height:1.65;}
.upload-card small {display:block;font-size:8px;color:#95839f;margin-top:3px;line-height:1.5;}
.upload-arrow {font-size:18px;}
.upload-card:hover {background:#e6dced;border-color:#cbbad6;}
.asset-finder {margin-bottom:12px;}
.asset-search {background:#f6f3ef;border:1px solid #ede7e0;border-radius:10px;padding:8px 11px;color:#969084;}
.asset-search input {color:#68606f;font-size:11px;}
.asset-search input::placeholder {color:#aaa096;}
.filter-tabs {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid #eee8e1;}
.filter-tabs button {padding:7px 0;background:transparent;color:#898180;font-size:10px;border-radius:7px;border:0;}
.filter-tabs button.active {background:#e4e9dc;color:#5e7051;font-weight:600;}
.filter-tabs button:hover:not(.active) {background:#f1edf4;color:#7b638a;}
.asset-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
.asset-card,.asset-card:nth-child(n) {min-height:144px;padding:7px 7px 11px;background:#f7f3eb;border:1px solid #f0ebe2;border-radius:13px;box-shadow:none;gap:4px;}
.asset-card:nth-child(4n+2) {background:#f0f2ea;border-color:#e9ecdf;}
.asset-card:nth-child(4n+3) {background:#f1ecf3;border-color:#eae3ee;}
.asset-card:nth-child(4n+4) {background:#f6eee7;border-color:#efe6dd;}
.asset-card:hover {border-color:#bdaeca;box-shadow:0 5px 12px #79658a0c;transform:translateY(-2px);}
.asset-card img {max-height:126px;}
.asset-card span {font-size:10px;color:#857a79;}
.library-footer {background:var(--surface);border-color:#ece5dd;color:#9b918c;font-size:9px;padding:14px 8px;}
.library-footer span {color:#ae9aba;}
.panel-section-title {color:#9c918f;}.panel-section-title b {color:#7a6e7a;}
.stage {background-color:#e7eadf;background-image:linear-gradient(#b9c5ae25 1px,transparent 1px),linear-gradient(90deg,#b9c5ae25 1px,transparent 1px);background-size:24px 24px;border:1px solid #dce1d4;border-radius:20px;}
.stage-bar {height:53px;padding:0 20px;background:#f1f2eaf5;border-bottom:1px solid #dfe3d6;}
.document-name {color:#9a9b8f;}.document-name input {font-size:12px;color:#787f70;}
.history-actions .icon-button {color:#76846e;}.history-actions .divider {background:#d9dece;}
.icon-button:hover {background:#dee5d6;}
.canvas-viewport {min-height:140px;}
.artboard-wrap {border-radius:4px;box-shadow:0 3px 5px #7279650c,0 17px 35px #6d795122;}
.empty-state .empty-doodle {width:84px;height:76px;transform:rotate(8deg);margin-bottom:18px;}
.empty-state h2 {font-family:'Tailo Sans',sans-serif;font-size:24px;font-weight:500;letter-spacing:.3px;color:#766184;}
.empty-state p {color:#a2989b;font-size:11px;line-height:1.8;}
.empty-state .text-button {color:#9a849f;}
.canvas-bottom {height:61px;justify-content:center;padding:0 16px;}
.view-tools {background:#fffdf8e8;border:1px solid #dce0d1;border-radius:14px;box-shadow:0 3px 8px #65784c09;padding:4px 7px;}
.view-tools .icon-button {color:#7e8875;}
.view-tools .selected {background:#ebe5ef;color:#82708e;border-radius:9px;}
.zoom-label {color:#818475;}
.dimension,.stage-hint {color:#8f9a85;}
.stage-hint {font-size:9px;padding-bottom:13px;}
.inspector {background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:25px 16px;}
.preview-heading .eyebrow {color:#ab9aae;font-size:7px;letter-spacing:1.5px;}
.preview-heading h2 {font-size:16px;font-weight:500;color:#72637c;margin-top:10px;}
.ceramic-scene {height:201px;border:1px solid #e9e2ec;border-radius:80px 80px 14px 14px;background:linear-gradient(155deg,#ece4ef,#f1ece5 80%);margin-top:22px;}
.ceramic-tile {box-shadow:5px 7px 0 #d4cccf,8px 16px 24px #7d6d8a26;transform:rotate(-7deg);}
.scene-spark.one {color:#b3b99c;}.scene-spark.two {color:#c4b3d0;}
.scene-note {font-family:'Tailo Round',sans-serif;color:#a69aaa;font-size:9px;letter-spacing:.2px;}
.preview-note {font-size:8px;color:#a69c97;line-height:1.8;margin-bottom:24px;}
.step-number {background:#ece6f0;color:#9b86a7;}.step-list b {color:#817389;font-size:11px;}.step-list li {color:#a196a0;font-size:10px;}
.handoff-note {background:#eef1e7;border:1px solid #e5e9db;border-radius:12px;padding:15px 12px;color:#7c896d;}
.handoff-note b {color:#788565;font-size:11px;font-weight:500;}.handoff-note p {color:#939b85;font-size:9px;line-height:1.8;}.handoff-icon {color:#98a481;}
.selected-controls h3 {color:#7c6b88;font-size:12px;}.field-label {color:#877d8b;}.field-label output {color:#8c779a;}.helper-copy {color:#9a919b;}
input[type=range] {accent-color:#8f7b9e;}
input[type=range]::-webkit-slider-thumb {background:#8f7b9e;}
.hint-box {background:#f2edf4;border:1px solid #e8dfec;color:#9989a0;}
#brush-dock {background:#f3f0f5;border-color:#e4dce8;}
.brush-item {background:#fcfaf5;border-color:#ebe7df;border-radius:12px;}.brush-item.active {background:#eee8f1;border-color:#b9a4c7;color:#786187;}
.brush-family {color:#9c8aaa;}.dock-title,.dock-title b {color:#80698f;}.dock-eraser {color:#928497;}.dock-eraser.active {background:#e5dbea;}
.palette .swatch.active {outline-color:#9f8aae;}.color-custom {color:#95899c;}
.bg-card canvas {border-color:#eee7dd;}.bg-card.active canvas {border-color:#a28cad;box-shadow:0 0 0 2px #e9dfee;}
.layer-item {border-color:#e8e1e9;background:#fcfaf6;}.layer-item.active {background:#ece5f0;border-color:#c1afcc;}.layer-type {background:#e3e9da;color:#8a9679;}
.selection-tools {background:#fffdfaf7;border-color:#d9cfdf;border-radius:13px;box-shadow:0 5px 18px #76628521;color:#806b8e;}
.selection-actions {display:flex;}.selection-actions button {flex:1;}.selection-actions button:hover {background:#ece6f0;}
.selection-actions .quick-delete {color:#a77a70;}.selection-actions .quick-delete:hover {background:#f5e9e3;}
.selection-opacity {border-color:#e4dce9;color:#96849e;}.selection-locked {color:#8c7d96;}
:is(#delete-confirm,#clear-confirm) {background:var(--surface);border-color:#dfd6e5;color:#71617e;}
:is(#delete-confirm,#clear-confirm) p,:is(#delete-confirm,#clear-confirm) small {color:#9a8c9c;}
:is(#delete-confirm,#clear-confirm)::backdrop,#modal::backdrop,#image-editor::backdrop {background:#48444e66;backdrop-filter:blur(5px);}
#modal,#image-editor {background:var(--surface);border:1px solid #e4dce8;color:#69616c;border-radius:22px;}
.modal-header h2,.photo-title h2 {font-family:'Tailo Sans',sans-serif;font-size:24px;font-weight:500;color:#6e5a7a;letter-spacing:.4px;}
.photo-title .eyebrow {color:#a08bad;}.photo-title>button {color:#a293a8;}
.photo-preview canvas {border-color:#dfd7e3;}.photo-tools button {background:#ede7f0;color:#8b749a;}.photo-tools .active {background:#8c759b;color:white;}
.crop-shapes button {background:#f1edf4;border-color:#e4d9eb;color:#8a7297;}.crop-shapes .active {background:#e9e2ee;border-color:#a890b7;color:#745783;}
.photo-label {color:#93819d;}.photo-label select {background:var(--surface);border-color:#dcd0e3;color:#806a8f;}
.photo-brush,#photo-status,.photo-note {color:#9d8da5;}.photo-footer {border-color:#e6deea;}.photo-footer>span {color:#99869f;}
.photo-tips {padding:19px 16px;background:#eff1e7;border-radius:12px;margin-top:24px;}.photo-tips h3 {color:#7c896c;}.photo-tips p {font-size:11px;color:#909b80;line-height:2;}.photo-tips .text-button {color:#929e81;font-size:10px;}.photo-settings h3 {color:#8a7695;}
.license-tag {background:#edf0e6;border-color:#d5ddc7;color:#80916c;}.font-choices button {background:#f8f5f1;border-color:#e8e1d9;}.font-choices button.active {background:#eae2ef;border-color:#b29ac1;box-shadow:inset 0 0 0 1px #b29ac1;}
.font-choices button span {color:#7e6b8a;}.font-choices button small {color:#a18eab;}.text-templates button {background:#f5eee3;border-color:#e9dfcc;}.text-templates button:nth-child(3n+2) {background:#ece6ef;border-color:#dfd4e6;}
#text-value {background:var(--surface);border-color:#dfd4e6;color:#7e688d;}#text-preview {border-color:#d2c1db;}.text-form-grid label {color:#9883a3;}.text-form-grid select {background:var(--surface);border-color:#dfd5e5;color:#8e739e;}
.toast {background:#7d6a8c;color:#fffdfb;box-shadow:0 6px 20px #5e4a7926;}
@media(max-width:1300px) {
 .workspace {grid-template-columns:58px 278px minmax(280px,1fr) 201px;gap:10px;margin:0 15px 15px;}
 .rail-button {width:46px;}.tool-rail {padding:11px 5px;}.library #library-content {padding:21px 15px;}.library h2 {font-size:19px;}
 .inspector {padding:24px 12px;}.preview-heading h2 {font-size:14px;}.ceramic-scene {height:172px;}.intro-bar h1 {font-size:27px;}.intro-collage {width:160px;}.spec-pill {padding-left:18px;}
 .asset-card,.asset-card:nth-child(n) {min-height:128px;}.asset-card span {font-size:10px;}
}
@media(max-width:1050px) {
 .workspace {grid-template-columns:58px 270px minmax(285px,1fr);}.intro-collage,.inspector {display:none;}.app-header {padding:0 21px;}.intro-bar {padding:0 24px;}.top-nav {display:none;}
}
@media(min-width:681px) and (max-height:800px) {
 .app-header {height:61px;min-height:61px;}.intro-bar {height:101px;min-height:101px;}.intro-bar h1 {font-size:25px;}.intro-copy p {font-size:10px;}.intro-collage {height:100px;transform:scale(.87);}
 .rail-button {height:46px;gap:5px;}.tool-rail {gap:5px;}.rail-button .icon {height:19px;width:19px;}.stage-bar {height:44px;}.canvas-bottom {height:50px;}.stage-hint {padding-bottom:10px;}
}

/* On phones the page scrolls naturally first; the canvas then sticks at the top. */
@media(max-width:680px){
 html,body{height:auto;min-height:100%;overflow:visible}html{scroll-padding-top:calc(var(--mobile-board-height) + 57px)}body{display:block;overflow-x:clip;background:#f6f3ee}.app-header{height:61px;min-height:61px;padding:0 14px;position:relative;border:0;gap:6px;background:#fffdf8}.brand{gap:8px}.brand-mark{font-size:36px;letter-spacing:-3px}.brand-spark{font-size:17px}.brand-cn{font-size:9px;letter-spacing:.5px;padding-left:8px}.brand-cn small{font-size:4.5px;letter-spacing:.2px}.header-actions{gap:4px}.header-actions .button{padding:8px 10px;border-radius:10px}.header-actions .quiet{font-size:0;background:#ece5ef;padding:8px}.header-actions .primary{font-size:10px;gap:4px}.intro-bar{height:87px;min-height:87px;display:flex;align-items:center;padding:10px 18px;background:#f6f3ee;overflow:hidden}.intro-copy .eyebrow{display:block;font-size:6px;color:#a08ba9;letter-spacing:1.3px}.intro-bar h1{font-size:20px;white-space:nowrap;line-height:1.65;margin:1px 0;letter-spacing:.1px}.intro-copy p{display:block;font-size:8px;letter-spacing:0;color:#9b9295;margin:0}.spec-pill,.intro-collage{display:none}.workspace{display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible;flex:none;margin:0 9px 12px;border-radius:16px;background:#fffdf8;box-shadow:none}.stage{position:sticky;top:0;order:0;z-index:12;align-self:stretch;flex:none;height:var(--mobile-board-height);min-height:0;border-radius:15px 15px 0 0;overflow:hidden;box-shadow:0 3px 6px #78855f08;background-color:#e7eadf}.stage-bar{height:36px;padding:0 12px;background:#f1f2ea}.document-name input{font-size:10px;width:135px}.history-actions .icon-button{height:28px;width:28px}.canvas-viewport{min-height:0;flex:1}.canvas-bottom{height:43px;justify-content:center;padding:0 9px}.view-tools{padding:3px 6px;border-radius:10px}.view-tools .icon-button{width:26px;height:26px}.zoom-label{font-size:9px;min-width:38px}.stage-hint{display:block;font-size:7px;white-space:nowrap;line-height:1.5;padding:0 5px 8px;color:#8c9882}.dimension.horizontal{top:5px;font-size:7px}.dimension.vertical{font-size:7px;left:5px}.empty-state .empty-doodle{height:52px;width:60px}.empty-state h2{font-size:19px;margin:2px 0 7px;font-weight:600}.empty-state p{font-size:8px;margin-bottom:10px}.empty-state .button{font-size:9px;padding:7px 13px}.empty-state .text-button{font-size:8px}.tool-rail{position:sticky;top:var(--mobile-board-height);order:1;z-index:13;display:flex;flex:none;height:57px;padding:5px 5px;gap:1px;justify-content:space-around;background:#fffdf8;border-top:1px solid #e4dfdc;border-bottom:1px solid #e4dfdc;box-shadow:0 3px 6px #81718909}.rail-button{width:44px;flex:0 1 44px;height:46px;border-radius:9px;gap:4px;font-size:9px}.rail-button .icon{width:18px;height:18px}.rail-button.active{background:#ece5ef;color:#846e94;box-shadow:none}.rail-button:not(.active){color:#8e967f}.rail-bottom{display:none}.library{position:relative;order:2;display:flex;flex-direction:column;flex:none;min-height:0;height:auto;overflow:visible;touch-action:auto;overscroll-behavior:auto;border:0;border-radius:0 0 15px 15px;background:#fffdf8}.library #library-content{height:auto;min-height:0;flex:none;overflow:visible;padding:19px 15px 27px}.library-footer{display:none}.library .panel-title-row{margin-bottom:11px}.library h2{font-size:18px;margin:0}.library .panel-title-row .eyebrow{display:none}.library .panel-title-row .small-tag{max-width:none;font-size:8px;padding:5px 8px}.library .panel-description{display:none}.upload-card{margin:10px 0 12px;padding:11px 12px;border-radius:10px}.upload-card b{font-size:12px}.upload-card small{font-size:8px}.asset-finder{margin-bottom:8px}.asset-search{padding:7px 10px}.filter-tabs{padding-bottom:9px;margin-bottom:12px;gap:4px}.filter-tabs button{padding:7px 0;font-size:9px}.buddy-tabs{padding-bottom:12px;gap:6px}.buddy-tabs button{font-size:9px;padding:6px 9px}.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.asset-card,.asset-card:nth-child(n){min-height:112px;border-radius:10px;padding:7px 4px 10px}.asset-card span{font-size:9px}.asset-card img{max-height:none}.selection-tools{width:234px;padding:5px 7px}.selection-actions button{font-size:9px;padding:7px 3px;gap:3px}.selection-actions .icon{width:13px;height:13px}.selection-opacity{font-size:8px;padding-top:4px}.mobile-controls{display:block}#brush-dock{flex:none;order:-1;background:#f0ebf3;padding:13px 15px}#brush-dock[hidden]{display:none}.photo-footer{background:#fffdf8}.photo-title h2{font-size:22px;font-weight:600}.photo-editor{padding:19px 15px}.photo-title .eyebrow{font-size:7px}.photo-tips{margin-top:19px;padding:15px}.photo-tips p{font-size:10px}.modal-header h2{font-size:23px}.text-templates{gap:8px}.text-templates button{min-height:49px}
}
@media(max-width:370px){.app-header{padding:0 11px}.brand-mark{font-size:32px}.brand-cn{display:none}.header-actions .primary{font-size:10px}.intro-bar h1{font-size:18px}.intro-bar{padding-left:15px}.rail-button{width:39px;flex-basis:39px;font-size:8px}.rail-button .icon{width:17px;height:17px}.stage-hint{font-size:6px}.document-name input{width:112px}.selection-tools{width:212px}.selection-actions button{font-size:8px}.selection-actions .icon{width:12px;height:12px}}
@media(hover:none){.rail-button:not(.active):hover{background:none;color:#8e967f}}
.stage-save{display:none}@media(max-width:680px){.stage-save{display:block;background:#8b759a;color:white;padding:5px 8px;font-size:9px;border-radius:7px;margin-left:4px}.document-name input{width:110px}.history-actions .divider{margin:0 2px}.history-actions .icon-button{width:24px}.history-actions .icon{width:17px;height:17px}}@media(max-width:370px){.document-name input{width:90px}.stage-save{padding:5px 7px}.stage-bar{padding:0 10px}}

/* Phone keeps the same studio palette and the established two-stage scrolling. */
@media(max-width:680px){
 body{min-height:100%;height:auto;}.workspace{gap:0;border:1px solid #dddcd4;margin:0 9px 12px;border-radius:18px;}
 .app-header{height:62px;min-height:62px;background:#f6f3ee;}.brand-mark{color:#796487;}.brand-spark{color:#8d9a7a;}.brand-cn{color:#6d6177;}
 .intro-bar{height:99px;min-height:99px;padding:12px 19px;background:#f6f3ee;}.intro-copy .eyebrow{font-size:6px;letter-spacing:1.25px;}.intro-bar h1{font-size:22px;letter-spacing:.7px;line-height:1.65;}.intro-copy p{font-size:9px;line-height:1.6;}
 .stage{border:0;border-radius:17px 17px 0 0;}.tool-rail{border-radius:0;box-shadow:0 3px 6px #75678409;background:#fffdf8;}.library{border:0;}
 .library h2{font-size:19px;}.library .filter-tabs button{font-size:10px;padding:7px 0;}.library .filter-tabs{gap:4px;}
 .library .asset-card,.library .asset-card:nth-child(n){min-height:116px;}.asset-card span{font-size:10px;}.asset-card img{max-height:none;}
 .empty-state h2{font-size:18px;font-weight:500;}.empty-state p{font-size:8px;}.empty-state .empty-doodle{margin-bottom:7px;}
 .header-actions .quiet{color:#82718d;}.header-actions .primary{background:#867192;}.stage-save{background:#8b759a;}.stage-bar{border-color:#dce1d4;}
 .library .panel-title-row .small-tag{font-size:8px;}.view-tools{border-color:#d8dfce;}.photo-footer{background:#fffdf8;}
 .photo-title h2{font-size:22px;font-weight:500;}.selection-tools{border-radius:11px;}
}
@media(max-width:370px){.intro-bar h1{font-size:20px;}.intro-copy p{font-size:8px;}.intro-bar{padding-left:16px;}.library #library-content{padding-left:13px;padding-right:13px;}.library h2{font-size:18px;}.upload-card small{font-size:7.5px;}}
@media(hover:none){.rail-button:not(.active):hover{background:transparent;color:#8e967f;}}
@media(prefers-reduced-motion:reduce){button{transition:none;}}

/* Clear action remains beside the canvas after mobile scrolling. */
.stage-bar{gap:8px}.document-name{min-width:0}.document-name input{min-width:0}.history-actions{flex-shrink:0}.clear-canvas-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 9px;border:1px solid #d9d2de;border-radius:8px;background:#fbf8fc;color:#7c688b;font:inherit;font-size:11px;white-space:nowrap}.clear-canvas-button:hover{background:#ece5ef}.clear-canvas-button .icon{width:14px;height:14px}
@media(max-width:680px){.stage-bar{gap:5px}.document-name{flex:1;overflow:hidden}.document-name input{width:100%;flex:1}.history-actions{gap:2px}.clear-canvas-button{font-size:9px;padding:5px 7px}.clear-canvas-button .icon{display:none}}