@charset "UTF-8";
:root{color-scheme:light dark;--paper:#f7f7f2;--ink:#243b32;--muted:#626c62;--line:#dcded3;--surface:#fff;--accent:#365b43;--soft:#e9eddf;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}a:focus-visible{outline:3px solid #b27c34;outline-offset:5px}::selection{background:#dae7b7}.wrap{width:min(1120px,calc(100% - 96px));margin:auto}.skip{position:absolute;left:24px;top:-80px;background:var(--surface);padding:16px;z-index:5}.skip:focus{top:12px}header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font:36px var(--serif);letter-spacing:-1.6px;text-decoration:none}.wordmark span{color:#84945d}nav{display:flex;gap:28px}nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:13px}nav a:hover{color:#8a6c30}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;padding:92px 0 88px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;display:flex;gap:10px;align-items:center;margin:0 0 26px}.eyebrow:before{content:"";height:7px;width:7px;background:#8b9e63;border-radius:50%}h1{font-size:clamp(36px,4vw,54px);font-weight:500;line-height:1.65;letter-spacing:.035em;margin:0 0 24px}h1 em{font-style:normal;color:#6e824b}.intro{font-size:14px;line-height:2.2;color:var(--muted);margin:0 0 30px}.text-link{display:inline-flex;align-items:center;gap:30px;min-height:48px;font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink)}.text-link span{font-size:20px;transition:transform .2s}.text-link:hover span{transform:translate(4px,0)}.hero-art{height:350px;border-radius:50% 50% 8px 8px;background:var(--soft);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.art-orbit{position:absolute;width:286px;height:286px;border:1px solid #b9c4a7;border-radius:50%}.art-orbit:after{content:"";position:absolute;inset:34px;border:1px solid #c7d0b7;border-radius:50%}.art-icon{position:absolute;width:104px;height:104px;border-radius:24px;box-shadow:0 15px 35px #233f2220}.art-icon:nth-of-type(1){transform:translate(-93px,10px) rotate(-13deg);z-index:1}.art-icon:nth-of-type(2){transform:translate(9px,-42px) rotate(6deg);z-index:3}.art-icon:nth-of-type(3){transform:translate(102px,49px) rotate(15deg);z-index:2}.art-label{position:absolute;bottom:22px;font:italic 14px var(--serif);letter-spacing:1px;color:#556747}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.section-heading h2{font:42px var(--serif);letter-spacing:-1px;margin:0}.section-heading p{font-size:12px;color:var(--muted);margin:0 0 6px}.apps{padding:46px 0 78px;border-top:1px solid var(--line)}.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.app-visual{height:220px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:8px;background:#e7ebdf}.app-visual img{width:98px;height:98px;border-radius:22px;box-shadow:0 12px 24px #26372717;transition:transform .3s}.app-card:hover .app-visual img{transform:translateY(-5px)}.app-card:nth-child(2) .app-visual{background:#f0e5d4}.app-card:nth-child(3) .app-visual{background:#e2e9ed}.app-number{position:absolute;left:18px;top:16px;font:italic 14px var(--serif);color:#64715d}.app-category{font-size:10px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin:24px 0 10px}.app-card h3{font-size:23px;font-weight:500;letter-spacing:-.5px;margin:0 0 12px}.app-copy{font-size:13px;line-height:2;color:var(--muted);margin:0}.app-card .text-link{font-size:12px;margin-top:15px;gap:18px}.about{border-top:1px solid var(--line);padding:55px 0 64px;display:grid;grid-template-columns:1fr 2fr;gap:40px}.about h2{font:36px var(--serif);margin:0}.about h3{font-size:19px;font-weight:500;margin:0 0 15px}.about p{font-size:14px;line-height:2.1;color:var(--muted);margin:0;max-width:600px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0 35px;font-size:11px;color:var(--muted)}footer a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}.footer-brand{font:24px var(--serif);letter-spacing:-.7px}
@media(min-width:1500px){.hero{padding-top:110px;padding-bottom:110px}}@media(max-width:850px){.wrap{width:calc(100% - 48px)}.hero{gap:24px;padding:64px 0}.hero-art{height:300px}.art-icon{width:82px;height:82px;border-radius:19px}.art-icon:nth-of-type(1){transform:translate(-70px,12px) rotate(-13deg)}.art-icon:nth-of-type(2){transform:translate(0,-40px) rotate(6deg)}.art-icon:nth-of-type(3){transform:translate(70px,45px) rotate(15deg)}.art-orbit{width:230px;height:230px}.app-grid{gap:18px}.app-visual{height:170px}.app-card h3{font-size:20px}}
@media(max-width:620px){.wrap{width:calc(100% - 40px)}header{height:82px}.wordmark{font-size:31px}nav{gap:20px}.hero{grid-template-columns:1fr;padding:48px 0 40px;gap:36px}h1{font-size:36px}.eyebrow{margin-bottom:22px}.intro{font-size:13px}.hero-art{height:260px;max-width:420px;width:100%;justify-self:center;border-radius:150px 150px 8px 8px}.art-icon{width:88px;height:88px}.art-icon:nth-of-type(1){transform:translate(-83px,0) rotate(-13deg)}.art-icon:nth-of-type(2){transform:translate(0,-32px) rotate(6deg)}.art-icon:nth-of-type(3){transform:translate(82px,30px) rotate(15deg)}.apps{padding:36px 0 44px}.section-heading h2{font-size:36px}.section-heading p{font-size:11px}.app-grid{grid-template-columns:1fr;gap:36px}.app-visual{height:210px}.app-visual img{width:100px;height:100px}.app-category{margin-top:20px}.app-card h3{font-size:24px}.app-copy{font-size:14px}.about{grid-template-columns:1fr;gap:24px;padding:36px 0 44px}footer{flex-wrap:wrap;gap:12px;padding:24px 0}.footer-brand{width:100%;margin-bottom:5px}}
@media(prefers-color-scheme:dark){:root{--paper:#19231e;--ink:#ecede3;--muted:#b0b9ab;--line:#39463a;--surface:#233129;--soft:#2c3929;--accent:#b4c58e}h1 em{color:#becd9a}.app-visual{background:#34432f}.app-card:nth-child(2) .app-visual{background:#4a4031}.app-card:nth-child(3) .app-visual{background:#2c3d48}.app-number{color:#c3cbb9}.art-orbit{border-color:#526247}.art-orbit:after{border-color:#425438}.art-label{color:#bfcca9}::selection{background:#4d6139}}
@media(max-width:620px){.section-heading{display:block}.section-heading p{margin:12px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Portfolio motion and responsive web showcase. Content is visible by default. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
button:focus-visible { outline: 3px solid #b27c34; outline-offset: 4px; }
.hero-line { display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.hero-art { perspective: 800px; }
[data-motion="full"] .art-icon { animation: icon-arrive 850ms cubic-bezier(.16,1,.3,1) both; }
[data-motion="full"] .art-icon:nth-of-type(1) { animation-delay: 140ms; }
[data-motion="full"] .art-icon:nth-of-type(2) { animation-delay: 240ms; }
[data-motion="full"] .art-icon:nth-of-type(3) { animation-delay: 340ms; }
@keyframes icon-arrive { from { opacity: 0; translate: 0 22px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
.tilt-target { perspective: 850px; }
.tilt-surface { transform-origin: center; }
.app-card:hover .app-visual img { transform: none; }
.text-link { transition: opacity 180ms, transform 180ms; }
.text-link:active { transform: scale(.97); transition-duration: 80ms; }
.web-section { border-top: 1px solid var(--line); padding: 52px 0 80px; }
.web-feature { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: center; }
.web-copy .eyebrow { margin-bottom: 20px; }
.web-copy h3 { font-size: clamp(24px,2.6vw,32px); line-height: 1.7; font-weight: 500; letter-spacing: .01em; margin: 0 0 20px; }
.web-copy > p:not(.eyebrow) { font-size: 14px; line-height: 2.1; color: var(--muted); }
.web-details { padding: 0; margin: 24px 0; list-style: none; }
.web-details li { font-size: 13px; line-height: 2.4; display: flex; align-items: center; gap: 12px; }
.web-details li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8b9e63; }
.web-copy .web-note { font-size: 12px !important; }
.web-demo { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px 20px; overflow: hidden; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.demo-toolbar > span { font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.preview-controls { display: flex; padding: 3px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.preview-controls button { min-width: 58px; min-height: 44px; border: 0; border-radius: 22px; font-size: 12px; background: transparent; transition: background-color 180ms, color 180ms, transform 180ms; }
.preview-controls button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.preview-controls button:active { transform: scale(.95); }
.demo-stage { position: relative; height: 330px; display: grid; place-items: center; perspective: 1000px; }
.screen-desktop, .screen-mobile { grid-area: 1 / 1; background: var(--paper); box-shadow: 0 22px 35px #172f2020; overflow: hidden; transition: transform 550ms cubic-bezier(.2,.8,.2,1), opacity 350ms ease, visibility 550ms; }
.screen-desktop { width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 9px; transform: rotateY(-6deg) rotateX(3deg); }
.browser-bar { display: flex; align-items: center; gap: 4px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 5px; height: 5px; background: #b1b9a6; border-radius: 50%; }
.browser-bar span { flex: 1; text-align: center; font-size: 8px; letter-spacing: .03em; color: var(--muted); }
.mini-page { padding: 17px 20px; }
.mini-nav { display: flex; justify-content: space-between; align-items: center; font: 20px var(--serif); letter-spacing: -.8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mini-nav span { font: 7px system-ui; letter-spacing: 0; }
.mini-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; padding: 20px 0; }
.mini-page small { display: block; font-size: 6px; letter-spacing: 1.2px; color: var(--muted); }
.mini-page strong { display: block; font-size: 22px; line-height: 1.6; font-weight: 500; margin: 8px 0; }
.mini-line { display: block; width: 62px; height: 3px; background: var(--line); margin-top: 12px; }
.mini-orbit { align-self: center; aspect-ratio: 1; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.mini-orbit img { width: 48px; height: 48px; border-radius: 10px; transform: rotate(-12deg) translate(6px, -4px); }
.mini-orbit img + img { transform: rotate(12deg) translate(-5px,12px); }
.mini-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mini-cards > div { display: grid; place-items: center; height: 50px; background: var(--soft); border-radius: 4px; }
.mini-cards img { width: 30px; height: 30px; border-radius: 7px; }
.screen-mobile { width: 158px; height: 294px; border: 5px solid #2b3730; border-radius: 27px; transform: translateY(18px) rotateY(10deg) scale(.94); opacity: 0; visibility: hidden; }
.phone-island { width: 43px; height: 10px; border-radius: 0 0 9px 9px; margin: -1px auto 0; background: #2b3730; }
.screen-mobile .mini-page { padding: 9px 12px; }
.screen-mobile .mini-nav { font-size: 17px; padding-bottom: 8px; margin-bottom: 17px; }
.screen-mobile .mini-page small { font-size: 5px; letter-spacing: .6px; }
.screen-mobile .mini-page strong { font-size: 20px; }
.mobile-art { height: 72px; border-radius: 40px 40px 4px 4px; background: var(--soft); display: flex; align-items: center; justify-content: center; gap: 4px; }
.mobile-art img { width: 41px; height: 41px; border-radius: 9px; transform: rotate(-9deg); }
.mobile-art img + img { transform: rotate(10deg); }
.mobile-lines { display: grid; gap: 5px; margin-top: 15px; }
.mobile-lines i { height: 3px; background: var(--line); width: 90%; }
.mobile-lines i:last-child { width: 56%; }
.web-demo[data-layout="mobile"] .screen-desktop { transform: translateY(-12px) rotateY(-10deg) scale(.93); opacity: 0; visibility: hidden; }
.web-demo[data-layout="mobile"] .screen-mobile { transform: translateY(0) rotateY(0) scale(1); opacity: 1; visibility: visible; }
.demo-caption { text-align: center; color: var(--muted); font-size: 11px; margin: 0; }
#motion-toggle { border: 1px solid var(--line); border-radius: 22px; padding: 0 16px; min-height: 44px; font-size: 11px; background: transparent; }
#motion-toggle[aria-pressed="true"] { background: var(--soft); border-color: var(--muted); }
#motion-toggle:disabled { cursor: default; }
@media (max-width: 850px) {
  .web-feature { gap: 28px; grid-template-columns: 1fr 1fr; }
  .web-demo { padding: 12px; }
  .demo-stage { height: 310px; }
  .mini-page { padding: 12px; }
  .mini-orbit img { width: 34px; height: 34px; }
  .mini-page strong { font-size: 19px; }
}
@media (max-width: 620px) {
  header { flex-wrap: wrap; height: auto; padding: 19px 0 13px; gap: 4px 16px; }
  nav { gap: 17px; }
  nav a { font-size: 12px; }
  h1 { font-size: clamp(28px,8.7vw,36px); }
  .hero-actions { gap: 20px; }
  .hero-actions .text-link { font-size: 12px; gap: 14px; }
  .web-section { padding: 36px 0 44px; }
  .web-feature { grid-template-columns: 1fr; gap: 24px; }
  .web-copy h3 { font-size: 27px; }
  .web-demo { padding: 14px; }
  .mini-orbit img { width: 44px; height: 44px; }
  .demo-stage { height: 320px; }
  #motion-toggle { order: 4; }
}
@media (prefers-contrast: more) {
  .web-demo, .preview-controls, .screen-desktop, #motion-toggle { border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tilt-surface, .screen-desktop { transform: none !important; }
}
html[data-motion="reduce"] { scroll-behavior: auto; }
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
[data-motion="reduce"] .tilt-surface, [data-motion="reduce"] .screen-desktop { transform: none !important; }